@q2devel/q2-storybook 1.0.39 → 1.0.41

package/dist/components/Ecommerce/product-card/ProductCard.js

@@ -0,0 +1,156 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { formatPrice } from '../../../utils/generalHelperFunction';
+import { buildClassesByJoining } from '../../../utils/StyleHelper';
+import { ShoppingBagIcon } from '@heroicons/react/24/solid';
+import { useCallback, useRef, useState } from 'react';
+import AddToCart from '../../Base/button/AddToCart';
+import Heading from '../../Base/heading/Heading';
+import Button from '../../Base/button/Button';
+import Spinner from '../../Base/spinner/Spinner';
+import Badge from '../../Base/badge/Badge';
+import LikeButton from '../wishlist/LikeButton';
+import DeleteButton from '../wishlist/DeleteButton';
+export const ProductCard = ({ product, href, className, imageClassName, contentClassName, titleClassName, colorClassName, priceClassName, descriptionClassName, badgeClassName, aspectRatio = 'square', imagePosition = 'center', imageObjectFit = 'cover', layout = 'default', hoverEffect = 'opacity', renderBadges = true, renderColor = true, renderDescription = false, elevationLevel = 0, rounded = 'md', titleLines = 1, onCardClick, onImageClick, renderFooter, renderHeader, actionButton, 
+// Add to cart functionality
+showAddButton = false, currentQuantity = 0, onQuantityChange, addButtonIcon = _jsx(ShoppingBagIcon, { className: "h-4 w-4" }), maxQuantity = 99, controlsClassName = '', buttonClassName = '', quantityClassName = '', customAddButton, disabled = false, locale, cartMode = 'full', showSpinnerInAdd = false, 
+// Wishlist functionality
+showWishlistButton = false, isInWishlist = false, onWishlistToggle, wishlistButtonClassName = '', isWishlistPending = false, 
+// Multiple wishlists support
+enableMultipleWishlists = false, wishlists = [], onAddToWishlist, onRemoveFromWishlist, onCreateWishlist, wishlistDropdownClassName = '', productWishlistIds = [], 
+// Delete functionality
+showDeleteButton = false, onDelete, deleteButtonClassName = '', isDeletePending = false, deleteButtonSize = 'md', deleteButtonPosition = 'top-right', }) => {
+    const [showWishlistDropdown, setShowWishlistDropdown] = useState(false);
+    const [showNewWishlistInput, setShowNewWishlistInput] = useState(false);
+    const [newWishlistName, setNewWishlistName] = useState('');
+    const inputRef = useRef(null);
+    const showQuantityControls = currentQuantity > 0 || (disabled && currentQuantity === 0);
+    const shouldShowQuantityControls = () => {
+        if (cartMode === 'add-only') {
+            return false;
+        }
+        return currentQuantity > 0 || (disabled && currentQuantity === 0);
+    };
+    const shouldShowAddButton = () => {
+        if (cartMode === 'add-only') {
+            return true;
+        }
+        return showAddButton;
+    };
+    // Determine which icon to show
+    const getButtonIcon = () => {
+        if (cartMode === 'add-only' && disabled && showSpinnerInAdd) {
+            return _jsx(Spinner, { className: "h-4 w-4" });
+        }
+        return addButtonIcon;
+    };
+    // Create aspect ratio class
+    const aspectRatioClass = {
+        square: 'aspect-square',
+        auto: 'aspect-auto',
+        video: 'aspect-video',
+        wide: 'aspect-[16/9]',
+    }[aspectRatio];
+    // Create object-fit class
+    const objectFitClass = {
+        cover: 'object-cover',
+        contain: 'object-contain',
+        fill: 'object-fill',
+        none: 'object-none',
+    }[imageObjectFit];
+    // Create object-position class
+    const objectPositionClass = {
+        top: 'object-top',
+        center: 'object-center',
+        bottom: 'object-bottom',
+    }[imagePosition];
+    // Create hover effect class
+    const hoverClass = {
+        opacity: 'group-hover:opacity-75',
+        scale: 'transform transition-transform group-hover:scale-105',
+        shadow: 'transition-shadow group-hover:shadow-lg',
+        border: 'border border-transparent group-hover:border-primary-500',
+        none: '',
+    }[hoverEffect];
+    // Create shadow elevation class
+    const elevationClass = {
+        0: '',
+        1: 'shadow-sm',
+        2: 'shadow',
+        3: 'shadow-md',
+    }[elevationLevel];
+    // Create rounded class
+    const roundedClass = {
+        none: 'rounded-none',
+        sm: 'rounded-sm',
+        md: 'rounded-md',
+        lg: 'rounded-lg',
+        full: 'rounded-full',
+    }[rounded];
+    // Create title line clamp class
+    const titleLineClampClass = {
+        1: 'line-clamp-1',
+        2: 'line-clamp-2',
+        3: 'line-clamp-3',
+    }[titleLines];
+    // Create layout class
+    const layoutClass = layout === 'horizontal' ? 'flex gap-4' : '';
+    const imageLayoutClass = layout === 'horizontal' ? 'w-1/3' : 'w-full';
+    const contentLayoutClass = layout === 'horizontal' ? 'w-2/3' : 'w-full';
+    const compactClass = layout === 'compact' ? 'space-y-1' : 'space-y-2';
+    const handleCardClick = useCallback(() => {
+        onCardClick && onCardClick(product);
+    }, [onCardClick, product]);
+    const handleImageClick = useCallback((e) => {
+        if (onImageClick) {
+            e.stopPropagation();
+            onImageClick(product);
+        }
+    }, [onImageClick, product]);
+    const handleAddToCart = useCallback(() => {
+        onQuantityChange && onQuantityChange(product, 1);
+    }, [onQuantityChange, product]);
+    const handleIncrement = useCallback(() => {
+        const newQuantity = Math.min(currentQuantity + 1, maxQuantity);
+        onQuantityChange && onQuantityChange(product, newQuantity);
+    }, [currentQuantity, maxQuantity, onQuantityChange, product]);
+    const handleDecrement = useCallback(() => {
+        const newQuantity = Math.max(currentQuantity - 1, 0);
+        onQuantityChange && onQuantityChange(product, newQuantity);
+    }, [currentQuantity, onQuantityChange, product]);
+    const handleAddToWishlist = useCallback((wishlistId) => (e) => {
+        e.stopPropagation();
+        if (!isWishlistPending) {
+            onAddToWishlist && onAddToWishlist(product, wishlistId);
+            setShowWishlistDropdown(false);
+        }
+    }, [onAddToWishlist, product, isWishlistPending]);
+    const handleRemoveFromWishlist = useCallback((wishlistId) => (e) => {
+        e.stopPropagation();
+        if (!isWishlistPending) {
+            onRemoveFromWishlist && onRemoveFromWishlist(product, wishlistId);
+            setShowWishlistDropdown(false);
+        }
+    }, [onRemoveFromWishlist, product, isWishlistPending]);
+    const handleCreateNewWishlist = useCallback((e) => {
+        e.stopPropagation();
+        e.preventDefault();
+        if (newWishlistName.trim() && onCreateWishlist) {
+            onCreateWishlist(newWishlistName.trim(), product);
+            setNewWishlistName('');
+            setShowNewWishlistInput(false);
+            setShowWishlistDropdown(false);
+        }
+    }, [newWishlistName, onCreateWishlist, product]);
+    const handleWishlistToggle = useCallback(() => {
+        if (onWishlistToggle) {
+            onWishlistToggle(product);
+        }
+    }, [onWishlistToggle, product]);
+    const handleDelete = useCallback(() => {
+        if (onDelete) {
+            onDelete(product);
+        }
+    }, [onDelete, product]);
+    return (_jsxs("div", { className: buildClassesByJoining('group relative', layoutClass, elevationClass, onCardClick ? 'cursor-pointer' : '', className), onClick: handleCardClick, children: [renderHeader && renderHeader(product), _jsxs("div", { className: buildClassesByJoining(imageLayoutClass, 'relative'), children: [product.badges && renderBadges && (_jsx("div", { className: "absolute top-2 left-2 z-10 flex flex-wrap gap-1", children: product.badges.map((badge, index) => (_jsx(Badge, { color: badge.color, children: badge.text }, index))) })), showDeleteButton ? (_jsx(DeleteButton, { show: showDeleteButton, onDelete: handleDelete, deleteButtonClassName: deleteButtonClassName, isDeletePending: isDeletePending, size: deleteButtonSize, position: deleteButtonPosition })) : (_jsx(LikeButton, { show: showWishlistButton, enableMultiple: enableMultipleWishlists, isInWishlist: isInWishlist, wishlists: wishlists, productWishlistIds: productWishlistIds, wishlistButtonClassName: wishlistButtonClassName, wishlistDropdownClassName: wishlistDropdownClassName, isWishlistPending: isWishlistPending, handleAddToWishlist: handleAddToWishlist, handleRemoveFromWishlist: handleRemoveFromWishlist, handleCreateNewWishlist: handleCreateNewWishlist, handleWishlistToggle: handleWishlistToggle })), _jsx("img", { alt: product.images[0]?.alt, src: product.images[0]?.href, className: buildClassesByJoining(aspectRatioClass, objectFitClass, objectPositionClass, hoverEffect !== 'none' ? hoverClass : '', roundedClass, 'bg-gray-200', onImageClick ? 'cursor-pointer' : '', imageClassName), onClick: handleImageClick }), _jsx("div", { children: _jsx(AddToCart, { addButtonIcon: _jsx(ShoppingBagIcon, { className: "h-4 w-4" }), handleAddToCart: handleAddToCart, showAddButton: true, disabled: disabled }) })] }), _jsxs("div", { className: buildClassesByJoining('mt-4', contentLayoutClass, compactClass, contentClassName), children: [_jsxs("div", { className: "flex justify-between gap-3", children: [_jsxs("div", { children: [_jsx(Heading, { level: 3, className: buildClassesByJoining('text-sm text-gray-700', titleLineClampClass, titleClassName), children: _jsxs(Button, { asLink: true, unstyled: true, href: href, children: [!onCardClick && (_jsx("span", { "aria-hidden": "true", className: "absolute inset-0" })), product.variation_name] }) }), renderDescription && product.description && (_jsx("p", { className: buildClassesByJoining('mt-1 text-sm text-gray-500 line-clamp-2', descriptionClassName), children: product.description }))] }), _jsxs("div", { className: 'flex flex-col justify-between', children: [_jsx("p", { className: buildClassesByJoining('text-sm font-medium text-gray-900', priceClassName), children: formatPrice(product.price, locale) }), _jsx("p", { className: buildClassesByJoining('text-sm font-normal text-gray-900 line-through', priceClassName), children: product.discountPercent && formatPrice(product.price / (1 - product.discountPercent / 100), locale) })] })] }), actionButton && _jsx("div", { className: "mt-2", children: actionButton }), renderFooter && renderFooter(product)] })] }));
+};

package/dist/components/Ecommerce/progress-stepper/ProgressStepper.d.ts

@@ -0,0 +1,26 @@
+import { ReactNode } from 'react';
+export type StepStatus = 'complete' | 'current' | 'upcoming';
+export interface Step {
+    id: string;
+    name: string;
+    href?: string;
+    status: StepStatus;
+    onClick?: () => void;
+    customIcon?: ReactNode;
+}
+export interface ProgressStepperProps {
+    steps: Step[];
+    className?: string;
+    orientation?: 'horizontal' | 'vertical';
+    showArrows?: boolean;
+    clickable?: boolean;
+    completeColor?: string;
+    currentColor?: string;
+    upcomingColor?: string;
+    completeIconClassName?: string;
+    currentIconClassName?: string;
+    upcomingIconClassName?: string;
+    showStepNumbers?: boolean;
+    renderCustomStep?: (step: Step, index: number, totalSteps: number) => ReactNode;
+}
+export declare const ProgressStepper: ({ steps, className, orientation, showArrows, clickable, completeColor, currentColor, upcomingColor, completeIconClassName, currentIconClassName, upcomingIconClassName, showStepNumbers, renderCustomStep, }: ProgressStepperProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Ecommerce/progress-stepper/ProgressStepper.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { buildClassesByJoining } from '../../../utils/StyleHelper';
+import { CheckIcon } from '@heroicons/react/24/solid';
+import Button from '../../Base/button/Button';
+export const ProgressStepper = ({ steps = [], className, orientation = 'horizontal', showArrows = true, clickable = true, completeColor = 'bg-green-600 hover:bg-green-800', currentColor = 'border-green-600 text-green-600', upcomingColor = 'border-gray-300 text-gray-500 group-hover:border-gray-400 group-hover:text-gray-900', completeIconClassName, currentIconClassName, upcomingIconClassName, showStepNumbers = true, renderCustomStep, }) => {
+    const renderStepContent = (step, stepIdx) => {
+        if (renderCustomStep) {
+            return renderCustomStep(step, stepIdx, steps.length);
+        }
+        const stepClicked = (e) => {
+            if (!clickable || !step.onClick)
+                return;
+            e.preventDefault();
+            step.onClick();
+        };
+        if (step.status === 'complete') {
+            if (step.href && clickable) {
+                return (_jsx(Button, { unstyled: true, href: step.href, onClick: stepClicked, className: buildClassesByJoining('group flex w-full items-center', !clickable && 'cursor-default'), children: _jsxs("span", { className: "flex items-center px-6 py-4 text-sm font-medium", children: [_jsx("span", { className: buildClassesByJoining('flex size-10 shrink-0 items-center justify-center rounded-full', completeColor, completeIconClassName), children: step.customIcon || (_jsx(CheckIcon, { "aria-hidden": "true", className: "size-6 text-white" })) }), _jsx("span", { className: "ml-4 text-sm font-medium text-gray-900", children: step.name })] }) }));
+            }
+            return (_jsx("div", { onClick: stepClicked, className: buildClassesByJoining('group flex w-full items-center', !clickable && 'cursor-default'), children: _jsxs("span", { className: "flex items-center px-6 py-4 text-sm font-medium", children: [_jsx("span", { className: buildClassesByJoining('flex size-10 shrink-0 items-center justify-center rounded-full', completeColor, completeIconClassName), children: step.customIcon || (_jsx(CheckIcon, { "aria-hidden": "true", className: "size-6 text-white" })) }), _jsx("span", { className: "ml-4 text-sm font-medium text-gray-900", children: step.name })] }) }));
+        }
+        if (step.status === 'current') {
+            if (step.href && clickable) {
+                return (_jsx(Button, { href: step.href, "aria-current": "step", onClick: stepClicked, className: buildClassesByJoining('group flex items-center text-sm font-medium', !clickable && 'cursor-default'), children: _jsxs("span", { className: "flex items-center px-6 py-4 text-sm font-medium", children: [_jsx("span", { className: buildClassesByJoining('flex size-10 shrink-0 items-center justify-center rounded-full border-2', currentColor, currentIconClassName), children: step.customIcon || (showStepNumbers && _jsx("span", { children: step.id })) }), _jsx("span", { className: "ml-4 text-sm font-medium text-green-600", children: step.name })] }) }));
+            }
+            return (_jsx("div", { "aria-current": "step", onClick: stepClicked, className: buildClassesByJoining('group flex items-center text-sm font-medium', !clickable && 'cursor-default'), children: _jsxs("span", { className: "flex items-center px-6 py-4 text-sm font-medium", children: [_jsx("span", { className: buildClassesByJoining('flex size-10 shrink-0 items-center justify-center rounded-full border-2', currentColor, currentIconClassName), children: step.customIcon || (showStepNumbers && _jsx("span", { children: step.id })) }), _jsx("span", { className: "ml-4 text-sm font-medium text-green-600", children: step.name })] }) }));
+        }
+        if (step.href && clickable) {
+            return (_jsx(Button, { href: step.href, onClick: stepClicked, className: buildClassesByJoining('group flex items-center', !clickable && 'cursor-default'), children: _jsxs("span", { className: "flex items-center px-6 py-4 text-sm font-medium", children: [_jsx("span", { className: buildClassesByJoining('flex size-10 shrink-0 items-center justify-center rounded-full border-2', upcomingColor, upcomingIconClassName), children: step.customIcon || (showStepNumbers && _jsx("span", { children: step.id })) }), _jsx("span", { className: "ml-4 text-sm font-medium text-gray-500 group-hover:text-gray-900", children: step.name })] }) }));
+        }
+        return (_jsx("div", { onClick: stepClicked, className: buildClassesByJoining('group flex items-center', !clickable && 'cursor-default'), children: _jsxs("span", { className: "flex items-center px-6 py-4 text-sm font-medium", children: [_jsx("span", { className: buildClassesByJoining('flex size-10 shrink-0 items-center justify-center rounded-full border-2', upcomingColor, upcomingIconClassName), children: step.customIcon || (showStepNumbers && _jsx("span", { children: step.id })) }), _jsx("span", { className: "ml-4 text-sm font-medium text-gray-500 group-hover:text-gray-900", children: step.name })] }) }));
+    };
+    const renderArrow = (stepIdx) => {
+        if (!showArrows || stepIdx === steps.length - 1)
+            return null;
+        if (orientation === 'horizontal') {
+            return (_jsx("div", { "aria-hidden": "true", className: "absolute top-0 right-0 hidden h-full w-5 md:block", children: _jsx("svg", { fill: "none", viewBox: "0 0 22 80", preserveAspectRatio: "none", className: "size-full text-gray-300", children: _jsx("path", { d: "M0 -2L20 40L0 82", stroke: "currentcolor", vectorEffect: "non-scaling-stroke", strokeLinejoin: "round" }) }) }));
+        }
+        // Vertical arrow (optional implementation)
+        return null;
+    };
+    const containerClasses = buildClassesByJoining(orientation === 'horizontal' ? 'md:flex md:divide-y-0' : 'flex-col', 'divide-y divide-gray-300 rounded-md border border-gray-300', className);
+    return (_jsx("nav", { "aria-label": "Progress", children: _jsx("ol", { role: "list", className: containerClasses, children: steps.map((step, stepIdx) => (_jsxs("li", { className: buildClassesByJoining('relative', orientation === 'horizontal' ? 'md:flex md:flex-1' : ''), children: [renderStepContent(step, stepIdx), renderArrow(stepIdx)] }, `${step.id}-${stepIdx}`))) }) }));
+};

package/dist/components/Ecommerce/wishlist/DeleteButton.d.ts

@@ -0,0 +1,10 @@
+export interface DeleteButtonProps {
+    show: boolean;
+    onDelete: () => void;
+    deleteButtonClassName?: string;
+    isDeletePending?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+}
+export declare const DeleteButton: ({ show, onDelete, deleteButtonClassName, isDeletePending, size, position, }: DeleteButtonProps) => import("react/jsx-runtime").JSX.Element | null;
+export default DeleteButton;

package/dist/components/Ecommerce/wishlist/DeleteButton.js

@@ -0,0 +1,30 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import buildClassesByJoining from '../../../utils/StyleHelper';
+import { TrashIcon } from '@heroicons/react/24/outline';
+export const DeleteButton = ({ show, onDelete, deleteButtonClassName = '', isDeletePending = false, size = 'md', position = 'top-right', }) => {
+    if (!show)
+        return null;
+    const sizeClasses = {
+        sm: 'p-1.5',
+        md: 'p-2',
+        lg: 'p-2.5',
+    }[size];
+    const iconSizeClasses = {
+        sm: 'h-4 w-4',
+        md: 'h-5 w-5',
+        lg: 'h-6 w-6',
+    }[size];
+    const positionClasses = {
+        'top-right': 'top-2 right-2',
+        'top-left': 'top-2 left-2',
+        'bottom-right': 'bottom-2 right-2',
+        'bottom-left': 'bottom-2 left-2',
+    }[position];
+    return (_jsx("div", { className: `absolute ${positionClasses} z-10`, children: _jsx("button", { onClick: (e) => {
+                e.stopPropagation();
+                if (!isDeletePending)
+                    onDelete();
+            }, disabled: isDeletePending, className: buildClassesByJoining(sizeClasses, 'flex items-center justify-center rounded-full bg-white shadow-md hover:bg-gray-100 transition-colors duration-200', isDeletePending ? 'opacity-50 cursor-not-allowed' : 'hover:shadow-lg', deleteButtonClassName), "aria-label": "Delete", children: _jsx(TrashIcon, { className: buildClassesByJoining(iconSizeClasses, 'text-red-500') }) }) }));
+};
+export default DeleteButton;

package/dist/components/Ecommerce/wishlist/LikeButton.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+export interface Wishlist {
+    id: string;
+    name: string;
+}
+export interface LikeButtonProps {
+    show?: boolean;
+    enableMultiple?: boolean;
+    isInWishlist?: boolean;
+    wishlists: Wishlist[];
+    productWishlistIds: string[];
+    wishlistButtonClassName?: string;
+    wishlistDropdownClassName?: string;
+    isWishlistPending?: boolean;
+    handleAddToWishlist: (id: string) => (e: React.MouseEvent) => void;
+    handleRemoveFromWishlist: (id: string) => (e: React.MouseEvent) => void;
+    handleCreateNewWishlist: (e: React.FormEvent) => void;
+    handleWishlistToggle?: () => void;
+}
+export declare const LikeButton: ({ show, enableMultiple, isInWishlist, wishlists, productWishlistIds, wishlistButtonClassName, wishlistDropdownClassName, isWishlistPending, handleAddToWishlist, handleRemoveFromWishlist, handleCreateNewWishlist, handleWishlistToggle, }: LikeButtonProps) => import("react/jsx-runtime").JSX.Element | null;
+export default LikeButton;

package/dist/components/Ecommerce/wishlist/LikeButton.js

@@ -0,0 +1,41 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import buildClassesByJoining from '../../../utils/StyleHelper';
+import { ChevronDownIcon } from '@heroicons/react/24/outline';
+import { HeartIcon as HeartIconOutline, HeartIcon as HeartIconSolid, } from '@heroicons/react/24/solid';
+import { useState } from 'react';
+import { WishlistDropdown } from './WishlistDropdown';
+export const LikeButton = ({ show = true, enableMultiple = false, isInWishlist = false, wishlists, productWishlistIds, wishlistButtonClassName, wishlistDropdownClassName, isWishlistPending = false, handleAddToWishlist, handleRemoveFromWishlist, handleCreateNewWishlist, handleWishlistToggle, }) => {
+    const [showDropdown, setShowDropdown] = useState(false);
+    const handleDropdownToggle = () => setShowDropdown(prev => !prev);
+    const handleAddToWishlistWrapper = (wishlistId) => {
+        const mouseEvent = new MouseEvent('click');
+        handleAddToWishlist(wishlistId)(mouseEvent);
+        setShowDropdown(false);
+    };
+    const handleRemoveFromWishlistWrapper = (wishlistId) => {
+        const mouseEvent = new MouseEvent('click');
+        handleRemoveFromWishlist(wishlistId)(mouseEvent);
+        setShowDropdown(false);
+    };
+    const handleCreateNewWishlistWrapper = (name) => {
+        const form = document.createElement('form');
+        const input = document.createElement('input');
+        input.name = 'wishlistName';
+        input.value = name;
+        form.appendChild(input);
+        const formEvent = new Event('submit');
+        formEvent.target = form;
+        formEvent.preventDefault = () => { };
+        formEvent.stopPropagation = () => { };
+        handleCreateNewWishlist(formEvent);
+        setShowDropdown(false);
+    };
+    if (!show)
+        return null;
+    return (_jsx("div", { className: "absolute top-2 right-2 z-30", onClick: e => e.stopPropagation(), children: enableMultiple ? (_jsxs("div", { className: "relative", children: [_jsxs("button", { onClick: handleDropdownToggle, disabled: isWishlistPending, className: buildClassesByJoining('p-2 flex items-center justify-center rounded-full bg-white shadow-md hover:bg-gray-100 transition-colors duration-200', isWishlistPending ? 'opacity-50 cursor-not-allowed' : '', wishlistButtonClassName), "aria-label": "Wishlist options", children: [isInWishlist ? (_jsx(HeartIconSolid, { className: "h-5 w-5 text-red-500" })) : (_jsx(HeartIconOutline, { className: "h-5 w-5 text-gray-600" })), _jsx(ChevronDownIcon, { className: "h-4 w-4 ml-1 text-gray-600" })] }), _jsx(WishlistDropdown, { show: showDropdown && !isWishlistPending, wishlists: wishlists, productWishlistIds: productWishlistIds, isWishlistPending: isWishlistPending, onAddToWishlist: handleAddToWishlistWrapper, onRemoveFromWishlist: handleRemoveFromWishlistWrapper, onCreateNewWishlist: handleCreateNewWishlistWrapper, onClose: () => setShowDropdown(false), className: wishlistDropdownClassName })] })) : (_jsx("button", { onClick: e => {
+                e.stopPropagation();
+                handleWishlistToggle?.();
+            }, disabled: isWishlistPending, className: buildClassesByJoining('p-2 flex items-center justify-center rounded-full bg-white shadow-md hover:bg-gray-100 transition-colors duration-200', isWishlistPending ? 'opacity-50 cursor-not-allowed' : '', wishlistButtonClassName), "aria-label": isInWishlist ? 'Remove from favorites' : 'Add to favorites', children: isInWishlist ? (_jsx(HeartIconSolid, { className: "h-5 w-5 text-red-500" })) : (_jsx(HeartIconOutline, { className: "h-5 w-5 text-gray-600" })) })) }));
+};
+export default LikeButton;

package/dist/components/Ecommerce/wishlist/WishlistDropdown.d.ts

@@ -0,0 +1,18 @@
+export interface Wishlist {
+    id: string;
+    name: string;
+}
+export interface WishlistDropdownProps {
+    show: boolean;
+    wishlists: Wishlist[];
+    productWishlistIds: string[];
+    isWishlistPending: boolean;
+    onAddToWishlist: (wishlistId: string) => void;
+    onRemoveFromWishlist: (wishlistId: string) => void;
+    onCreateNewWishlist: (name: string) => void;
+    onClose?: () => void;
+    className?: string;
+    isModal?: boolean;
+}
+export declare const WishlistDropdown: ({ show, wishlists, productWishlistIds, isWishlistPending, onAddToWishlist, onRemoveFromWishlist, onCreateNewWishlist, onClose, className, isModal, }: WishlistDropdownProps) => import("react/jsx-runtime").JSX.Element | null;
+export default WishlistDropdown;

package/dist/components/Ecommerce/wishlist/WishlistDropdown.js

@@ -0,0 +1,49 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import buildClassesByJoining from '../../../utils/StyleHelper';
+import { CheckIcon, PlusCircleIcon, TrashIcon } from '@heroicons/react/24/outline';
+import { useRef, useState } from 'react';
+import TextField from '../../Forms/text-field/TextField';
+export const WishlistDropdown = ({ show, wishlists, productWishlistIds, isWishlistPending, onAddToWishlist, onRemoveFromWishlist, onCreateNewWishlist, onClose, className, isModal = false, }) => {
+    const [showNewWishlistInput, setShowNewWishlistInput] = useState(false);
+    const [newWishlistName, setNewWishlistName] = useState('');
+    const inputRef = useRef(null);
+    const handleCreateNewWishlist = (e) => {
+        e.preventDefault();
+        if (newWishlistName.trim()) {
+            onCreateNewWishlist(newWishlistName.trim());
+            setNewWishlistName('');
+            setShowNewWishlistInput(false);
+            onClose?.();
+        }
+    };
+    const handleShowNewWishlistInput = (e) => {
+        e.stopPropagation();
+        setShowNewWishlistInput(true);
+        setTimeout(() => inputRef.current?.focus(), 0);
+    };
+    const handleWishlistClick = (wishlistId, isInWishlist) => {
+        if (isInWishlist) {
+            onRemoveFromWishlist(wishlistId);
+        }
+        else {
+            onAddToWishlist(wishlistId);
+        }
+        onClose?.();
+    };
+    if (!show)
+        return null;
+    const dropdownContent = (_jsxs("div", { className: "py-1", children: [wishlists.length > 0 && (_jsxs(_Fragment, { children: [_jsx("div", { className: "px-3 py-1.5 text-xs font-semibold text-gray-500 uppercase tracking-wider", children: "Wishlist Lists" }), wishlists.map(wishlist => {
+                        const isInWishlist = productWishlistIds.includes(wishlist.id);
+                        return (_jsxs("button", { onClick: () => handleWishlistClick(wishlist.id, isInWishlist), className: "w-full text-left px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-100 flex items-center justify-between", disabled: isWishlistPending, children: [_jsxs("div", { className: "flex items-center", children: [isInWishlist ? (_jsx(TrashIcon, { className: "h-3.5 w-3.5 mr-2 text-red-600" })) : (_jsx(PlusCircleIcon, { className: "h-3.5 w-3.5 mr-2 text-green-600" })), _jsx("span", { className: "truncate", children: wishlist.name })] }), isInWishlist && (_jsx(CheckIcon, { className: "h-4 w-4 text-green-600 flex-shrink-0" }))] }, wishlist.id));
+                    })] })), showNewWishlistInput ? (_jsx("form", { onSubmit: handleCreateNewWishlist, className: "px-3 py-2 border-t", children: _jsxs("div", { className: "space-y-2", children: [_jsx(TextField, { ref: inputRef, value: newWishlistName, onChange: (e) => setNewWishlistName(e.target.value), placeholder: "New wishlist name", size: "sm", className: "text-xs", onClick: (e) => e.stopPropagation(), disabled: isWishlistPending }), _jsxs("div", { className: "flex gap-1.5", children: [_jsx("button", { type: "submit", disabled: !newWishlistName.trim() || isWishlistPending, className: "flex-1 px-2 py-1 text-xs text-white bg-green-600 rounded hover:bg-green-700 disabled:opacity-50", children: "Create" }), _jsx("button", { type: "button", onClick: (e) => {
+                                        e.stopPropagation();
+                                        setShowNewWishlistInput(false);
+                                        setNewWishlistName('');
+                                    }, className: "flex-1 px-2 py-1 text-xs text-gray-600 bg-gray-200 rounded hover:bg-gray-300", children: "Cancel" })] })] }) })) : (_jsxs("button", { onClick: handleShowNewWishlistInput, className: "w-full text-left px-3 py-1.5 text-sm text-green-600 hover:bg-gray-100 flex items-center border-t", disabled: isWishlistPending, children: [_jsx(PlusCircleIcon, { className: "h-3.5 w-3.5 mr-2" }), _jsx("span", { className: "truncate", children: "Create New Wishlist" })] }))] }));
+    if (isModal) {
+        return (_jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50", children: _jsxs("div", { className: "bg-white rounded-lg shadow-xl p-6 m-4 max-w-md w-full", onClick: e => e.stopPropagation(), children: [_jsx("h3", { className: "text-lg font-semibold mb-4", children: "Wishlist Options" }), _jsx("div", { className: "bg-white rounded-md shadow-xs border border-gray-200", children: dropdownContent }), onClose && (_jsx("button", { onClick: onClose, className: "mt-4 w-full px-4 py-2 border border-gray-300 rounded hover:bg-gray-50", children: "Close" }))] }) }));
+    }
+    return (_jsx("div", { className: buildClassesByJoining('absolute right-0 mt-1 w-52 bg-white rounded-md shadow-xl z-50 border border-gray-200', className), children: dropdownContent }));
+};
+export default WishlistDropdown;

package/dist/components/Forms/dropdown/Dropdown.d.ts

@@ -0,0 +1,11 @@
+export type DropdownOption = {
+    id: string;
+    label: string;
+};
+export type DropdownProps = {
+    name?: string;
+    options: DropdownOption[];
+    onSelect: (id: string) => void;
+    selectedId?: string;
+};
+export default function Dropdown({ name, options, onSelect, selectedId, }: DropdownProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Forms/dropdown/Dropdown.js

@@ -0,0 +1,12 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/react';
+import { ChevronDownIcon } from '@heroicons/react/20/solid';
+export default function Dropdown({ name = '', options, onSelect, selectedId = '', }) {
+    const selected = options.find((opt) => opt.id === selectedId) || options[0];
+    const buttonLabel = name ? `${name} ${selected.label}` : selected.label;
+    const handleSelect = (option) => {
+        onSelect(option.id);
+    };
+    return (_jsxs(Menu, { as: "div", className: "relative inline-block text-left z-50", children: [_jsx("div", { children: _jsxs(MenuButton, { className: "inline-flex w-full justify-center gap-x-1.5 rounded-md bg-white px-3 py-2 text-sm font-normal text-gray-900 shadow-xs ring-1 ring-gray-300 ring-inset hover:bg-gray-50", children: [buttonLabel, _jsx(ChevronDownIcon, { "aria-hidden": "true", className: "-mr-1 size-5 text-gray-400" })] }) }), _jsx(MenuItems, { className: "absolute right-0 z-10 mt-2 w-56 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black/5 focus:outline-none", children: _jsx("div", { className: "py-1", children: options.map((option) => (_jsx(MenuItem, { children: ({ active }) => (_jsx("button", { onClick: () => handleSelect(option), className: `block w-full text-left px-4 py-2 text-sm ${active ? 'bg-gray-100 text-gray-900' : 'text-gray-700'}`, children: option.label })) }, option.id))) }) })] }));
+}

package/dist/components/Forms/select-field/SelectField.d.ts

@@ -0,0 +1,29 @@
+import React, { ReactNode, Ref } from 'react';
+import { GroupBase, Props, SelectInstance } from 'react-select';
+import { TooltipRef } from '../../Base/tooltip/Tooltip';
+export type SelectFieldSize = 'sm' | 'md' | 'xs' | 'border-sm';
+export type SelectFieldProps<Option, Group extends GroupBase<Option> = GroupBase<Option>, IsMulti extends boolean = false> = Omit<Props<Option, IsMulti, Group>, 'className' | 'classNamePrefix' | 'loadOptions'> & {
+    label?: string;
+    isRequired?: boolean;
+    srOnlyLabel?: boolean;
+    subtitle?: string;
+    color?: string;
+    valid?: boolean;
+    size?: SelectFieldSize;
+    message?: string;
+    className?: string;
+    removePaddingTop?: boolean;
+    renderMessageInTooltip?: boolean;
+    selectFieldType?: 'table' | 'default';
+    placeholder?: string;
+    tooltipRef?: Ref<TooltipRef>;
+    disablePortal?: boolean;
+    tooltipMessage?: ReactNode;
+    typeSelect?: 'single' | 'multi' | 'single-badges';
+    badgeLabelClassName?: string;
+    connected?: boolean;
+    connectPosition?: 'left' | 'right' | 'middle' | 'none';
+};
+export type SelectFieldRefType<Option, Group extends GroupBase<Option>, IsMulti extends boolean = false> = SelectInstance<Option, IsMulti, Group>;
+declare const SelectField: <Option = unknown, Group extends GroupBase<Option> = GroupBase<Option>, IsMulti extends boolean = false>(props: SelectFieldProps<Option, Group, IsMulti> & React.RefAttributes<SelectFieldRefType<Option, Group, IsMulti>>) => React.JSX.Element;
+export default SelectField;

package/dist/components/Forms/select-field/SelectField.js

@@ -0,0 +1,142 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { buildClassesByJoining } from '../../../utils/StyleHelper';
+import { forwardRef, isValidElement, useId } from 'react';
+import ReactSelect from 'react-select';
+import Badge from '../../Base/badge/Badge';
+import { CloseIcon } from '../../icon/CloseIcon';
+import { InfoIcon } from '../../icon/InfoIcon';
+import Label from '../../label/Label';
+import Tooltip from '../../Base/tooltip/Tooltip';
+import SelectFieldOption from './SelectFieldOption';
+function SelectFieldComponent({ id, label, isRequired, srOnlyLabel, selectFieldType = 'default', subtitle, size = 'md', color = 'primary', valid = true, className, message, placeholder = selectFieldType === 'table' ? '...' : '', isSearchable = false, removePaddingTop, menuPosition = 'fixed', renderMessageInTooltip, tooltipRef, disablePortal, tooltipMessage, isMulti, typeSelect = isMulti ? 'multi' : 'single', badgeLabelClassName, styles: customStyles, connected, connectPosition, ...props }, ref) {
+    const randomId = useId();
+    const isMultiSelect = typeSelect === 'multi';
+    const renderMessage = () => {
+        return message && _jsx("span", { className: "text-xs mt-1 block text-gray-500", children: message });
+    };
+    const containerClassName = buildClassesByJoining({
+        invalid: !valid,
+        [color]: true,
+        [size]: true,
+        selector: true,
+        '!pt-0': removePaddingTop,
+        'font-medium': selectFieldType === 'table',
+    }, className, 'flex flex-col gap-2');
+    const testAttributes = {
+        'data-test-element': 'select',
+        'data-test-element-type': typeSelect === 'multi' ? 'multi-select' : 'single-select',
+        'data-test-name': props?.name,
+        'data-test-selected-label': props?.value?.label,
+        'data-test-selected-value': props?.value?.value,
+        'data-test-is-disabled': props?.isDisabled,
+    };
+    const renderOptionBadge = ({ children, removeProps }) => {
+        return (_jsx(Badge, { color: "bg-green-100 text-green-800", rightIcon: _jsx(CloseIcon, { onMouseDown: (event) => {
+                    event.preventDefault();
+                    event.stopPropagation();
+                }, onClick: (event) => {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    if (removeProps && typeof removeProps.onClick === 'function') {
+                        removeProps.onClick(event);
+                    }
+                }, className: "w-4 h-4 cursor-pointer" }), className: "m-1", labelClassName: badgeLabelClassName, children: children }));
+    };
+    const getMultiValueComponent = (props) => {
+        const selectedValues = props.getValue();
+        if (selectFieldType === 'table') {
+            return (props.index === 0 && (_jsxs(_Fragment, { children: [renderOptionBadge(props), selectedValues.length > 1 && (_jsx(Badge, { color: "bg-green-100 text-green-800", className: "m-1", children: _jsxs("span", { children: ["+", selectedValues.length - 1] }) }))] })));
+        }
+        return renderOptionBadge(props);
+    };
+    const getBaseStyles = () => {
+        let controlStyles = {};
+        if (connected) {
+            if (connectPosition === 'left') {
+                controlStyles.borderTopRightRadius = 0;
+                controlStyles.borderBottomRightRadius = 0;
+                controlStyles.borderRight = 'none';
+            }
+            else if (connectPosition === 'right') {
+                controlStyles.borderTopLeftRadius = 0;
+                controlStyles.borderBottomLeftRadius = 0;
+                controlStyles.borderLeft = 'none';
+            }
+            else if (connectPosition === 'middle') {
+                controlStyles.borderRadius = 0;
+                controlStyles.borderRight = 'none';
+                controlStyles.borderLeft = 'none';
+            }
+        }
+        return {
+            ...customStyles,
+            indicatorSeparator: (base) => ({
+                ...base,
+                display: 'none',
+            }),
+            placeholder: (base) => ({
+                ...base,
+                opacity: 0.4,
+                fontWeight: 'normal',
+                fontSize: selectFieldType === 'table' ? '1rem' : '0.75rem',
+            }),
+            control: (base) => ({
+                ...base,
+                paddingLeft: selectFieldType === 'table' ? '4px' : '0',
+                minHeight: size === 'md' ? '36px' : '',
+                ...controlStyles,
+            }),
+            dropdownIndicator: (base, state) => ({
+                ...base,
+                opacity: state.isFocused || state.selectProps.menuIsOpen ? 1 : 0.4,
+            }),
+            singleValue: (base) => {
+                if (typeSelect !== 'single-badges') {
+                    return base;
+                }
+                return {
+                    ...base,
+                    backgroundColor: '#E5EFFE',
+                    border: '0.063rem solid #A0AEC0',
+                    color: '#374151 !important',
+                    padding: '0.125rem 0.625rem',
+                    fontSize: '0.75rem',
+                    borderRadius: '6px',
+                    width: 'fit-content',
+                };
+            },
+        };
+    };
+    const commonProps = {
+        id: id || randomId,
+        instanceId: id || randomId,
+        isSearchable,
+        className: buildClassesByJoining({
+            [size]: true,
+        }, 'selector-container'),
+        menuPortalTarget: typeof document !== 'undefined' && menuPosition === 'fixed' && !disablePortal
+            ? document.body
+            : undefined,
+        classNamePrefix: 'selector',
+        placeholder,
+        menuPosition,
+        openMenuOnFocus: true,
+        openMenuOnClick: true,
+        noOptionsMessage: () => _jsx("div", { className: "text-gray-500 text-sm", children: "No options available" }),
+    };
+    return (_jsxs("div", { className: containerClassName, children: [(!!label?.length || isValidElement(tooltipMessage)) && (_jsxs("div", { className: "flex gap-1", children: [_jsx(Label, { text: label, isRequired: isRequired, htmlFor: randomId, subtitle: subtitle, srOnly: srOnlyLabel }), tooltipMessage && (_jsx(Tooltip, { placement: "top", content: tooltipMessage, contentClassName: "max-w-64", children: _jsx(InfoIcon, {}) }))] })), _jsx("div", { className: "flex flex-col relative shadow-sm", children: renderMessageInTooltip ? (_jsx(Tooltip, { content: message, backgroundColor: !valid ? 'bg-red-500' : 'bg-green-500', textColor: "text-white", ref: tooltipRef, disabled: !renderMessageInTooltip || !message, lazy: false, children: _jsx("div", { ...testAttributes, children: isMultiSelect ? (_jsx(ReactSelect, { ...props, ...commonProps, styles: getBaseStyles(), isMulti: true, ref: ref, components: {
+                                Option: SelectFieldOption,
+                                MultiValue: getMultiValueComponent,
+                            } })) : (_jsx(ReactSelect, { ...props, ...commonProps, styles: getBaseStyles(), isMulti: false, ref: ref, components: {
+                                Option: SelectFieldOption,
+                                MultiValue: getMultiValueComponent,
+                            } })) }) })) : (_jsx("div", { ...testAttributes, children: isMultiSelect ? (_jsx(ReactSelect, { ...props, ...commonProps, styles: getBaseStyles(), isMulti: true, ref: ref, components: {
+                            Option: SelectFieldOption,
+                            MultiValue: getMultiValueComponent,
+                        } })) : (_jsx(ReactSelect, { ...props, ...commonProps, styles: getBaseStyles(), isMulti: false, ref: ref, components: {
+                            Option: SelectFieldOption,
+                            MultiValue: getMultiValueComponent,
+                        } })) })) }), !renderMessageInTooltip && renderMessage()] }));
+}
+const SelectField = forwardRef(SelectFieldComponent);
+export default SelectField;

package/dist/components/Forms/select-field/SelectFieldOption.d.ts

@@ -0,0 +1,4 @@
+import { GroupBase, OptionProps } from 'react-select';
+export type SelectFieldOptionProps<Option = unknown, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>> = OptionProps<Option, IsMulti, Group>;
+declare const SelectFieldOption: <Option = unknown, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>({ children, data, ...props }: SelectFieldOptionProps<Option, IsMulti, Group>) => import("react/jsx-runtime").JSX.Element;
+export default SelectFieldOption;

package/dist/components/Forms/select-field/SelectFieldOption.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { components } from 'react-select';
+const SelectFieldOption = ({ children, data, ...props }) => {
+    const optionData = data;
+    return (_jsx(components.Option, { ...props, data: data, children: _jsx("span", { "data-test-option": JSON.stringify(optionData), "data-test-option-value": optionData.value, "data-test-option-label": optionData.label, children: children }) }));
+};
+export default SelectFieldOption;