@q2devel/q2-storybook 1.0.10 → 1.0.11

package/dist/components/badge/Badge.js

@@ -0,0 +1,9 @@
+'use client';
+import React from 'react';
+var Badge = function (_a) {
+    var children = _a.children, onClick = _a.onClick, _b = _a.color, color = _b === void 0 ? 'bg-blue-100 text-blue-800' : _b, _c = _a.className, className = _c === void 0 ? '' : _c, _d = _a.labelClassName, labelClassName = _d === void 0 ? '' : _d, rightIcon = _a.rightIcon;
+    return (React.createElement("span", { className: "inline-flex items-center rounded px-2.5 py-0.5 text-xs font-medium ".concat(color, " ").concat(className), onClick: onClick },
+        React.createElement("span", { className: labelClassName }, children),
+        rightIcon && React.createElement("span", { className: "ml-1" }, rightIcon)));
+};
+export default Badge;

package/dist/components/banner/Banner.js

@@ -0,0 +1,137 @@
+'use client';
+import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/24/outline';
+import React, { useEffect, useState } from 'react';
+import buildClassesByJoining from '../../utils/StyleHelper';
+export var Banner = function (_a) {
+    var items = _a.items, _b = _a.height, height = _b === void 0 ? 'md' : _b, _c = _a.autoplay, autoplay = _c === void 0 ? false : _c, _d = _a.autoplayInterval, autoplayInterval = _d === void 0 ? 5000 : _d, _e = _a.controls, controls = _e === void 0 ? 'both' : _e, _f = _a.overlayStyle, overlayStyle = _f === void 0 ? 'gradient' : _f, _g = _a.textAlignment, textAlignment = _g === void 0 ? 'center' : _g, _h = _a.textPosition, textPosition = _h === void 0 ? 'center' : _h, _j = _a.className, className = _j === void 0 ? '' : _j, _k = _a.imageClassName, imageClassName = _k === void 0 ? '' : _k, _l = _a.titleClassName, titleClassName = _l === void 0 ? '' : _l, _m = _a.subtitleClassName, subtitleClassName = _m === void 0 ? '' : _m, _o = _a.buttonClassName, buttonClassName = _o === void 0 ? '' : _o, _p = _a.indicatorsClassName, indicatorsClassName = _p === void 0 ? '' : _p, _q = _a.controlsClassName, controlsClassName = _q === void 0 ? '' : _q, _r = _a.contentClassName, contentClassName = _r === void 0 ? '' : _r, _s = _a.rounded, rounded = _s === void 0 ? 'none' : _s, _t = _a.buttonRounded, buttonRounded = _t === void 0 ? 'md' : _t, _u = _a.animation, animation = _u === void 0 ? 'slide' : _u, _v = _a.animationDuration, animationDuration = _v === void 0 ? 500 : _v, _w = _a.pauseOnHover, pauseOnHover = _w === void 0 ? true : _w, _x = _a.infiniteLoop, infiniteLoop = _x === void 0 ? true : _x, _y = _a.objectFit, objectFit = _y === void 0 ? 'cover' : _y, _z = _a.objectPosition, objectPosition = _z === void 0 ? 'center' : _z, renderItem = _a.renderItem, renderControls = _a.renderControls, renderIndicators = _a.renderIndicators, onSlideChange = _a.onSlideChange, _0 = _a.withOverlay, withOverlay = _0 === void 0 ? true : _0, _1 = _a.overlayOpacity, overlayOpacity = _1 === void 0 ? 0.5 : _1;
+    var _2 = useState(0), currentIndex = _2[0], setCurrentIndex = _2[1];
+    var _3 = useState(0), prevIndex = _3[0], setPrevIndex = _3[1];
+    var _4 = useState(false), isHovered = _4[0], setIsHovered = _4[1];
+    var showArrows = controls === 'arrows' || controls === 'both';
+    var showDots = controls === 'dots' || controls === 'both';
+    var heightClasses = {
+        sm: 'h-48 sm:h-64',
+        md: 'h-64 sm:h-96',
+        lg: 'h-80 sm:h-[32rem]',
+        xl: 'h-96 sm:h-[40rem]',
+        full: 'h-screen',
+        auto: 'h-auto',
+    };
+    var overlayClasses = {
+        dark: "bg-black/".concat(Math.round(overlayOpacity * 100)),
+        light: "bg-white/".concat(Math.round(overlayOpacity * 100)),
+        gradient: 'bg-gradient-to-t from-black/70 via-black/30 to-transparent',
+        none: '',
+    };
+    var textAlignmentClasses = {
+        left: 'text-left items-start',
+        center: 'text-center items-center',
+        right: 'text-right items-end',
+    };
+    var textPositionClasses = {
+        top: 'justify-start pt-10',
+        center: 'justify-center',
+        bottom: 'justify-end pb-10',
+    };
+    var roundedClasses = {
+        none: 'rounded-none',
+        sm: 'rounded-sm',
+        md: 'rounded-md',
+        lg: 'rounded-lg',
+        xl: 'rounded-xl',
+        full: 'rounded-full',
+    };
+    var buttonRoundedClasses = {
+        none: 'rounded-none',
+        sm: 'rounded-sm',
+        md: 'rounded-md',
+        lg: 'rounded-lg',
+        xl: 'rounded-xl',
+        full: 'rounded-full',
+    };
+    var objectFitClasses = {
+        cover: 'object-cover',
+        contain: 'object-contain',
+        fill: 'object-fill',
+        none: 'object-none',
+    };
+    var objectPositionClasses = {
+        center: 'object-center',
+        top: 'object-top',
+        bottom: 'object-bottom',
+        left: 'object-left',
+        right: 'object-right',
+    };
+    var animationClasses = {
+        slide: "transition-transform duration-".concat(animationDuration),
+        fade: "transition-opacity duration-".concat(animationDuration),
+        zoom: "transform transition-transform duration-".concat(animationDuration),
+        none: '',
+    };
+    var goToNext = function () {
+        setPrevIndex(currentIndex);
+        setCurrentIndex(function (prev) {
+            var newIndex = prev === items.length - 1 ? (infiniteLoop ? 0 : prev) : prev + 1;
+            onSlideChange && onSlideChange(newIndex, prev);
+            return newIndex;
+        });
+    };
+    var goToPrev = function () {
+        setPrevIndex(currentIndex);
+        setCurrentIndex(function (prev) {
+            var newIndex = prev === 0 ? (infiniteLoop ? items.length - 1 : prev) : prev - 1;
+            onSlideChange && onSlideChange(newIndex, prev);
+            return newIndex;
+        });
+    };
+    var goToSlide = function (index) {
+        if (index === currentIndex)
+            return;
+        setPrevIndex(currentIndex);
+        setCurrentIndex(index);
+        onSlideChange && onSlideChange(index, currentIndex);
+    };
+    // Autoplay effet
+    useEffect(function () {
+        if (!autoplay || (pauseOnHover && isHovered) || items.length <= 1)
+            return;
+        var interval = setInterval(goToNext, autoplayInterval);
+        return function () { return clearInterval(interval); };
+    }, [autoplay, autoplayInterval, isHovered, items.length, pauseOnHover]);
+    if (!items || items.length === 0) {
+        return null;
+    }
+    // Renderovanie individuálneho slide
+    var renderDefaultItem = function (item, index) { return (React.createElement("div", { key: item.id, className: "min-w-full h-full relative ".concat(animation === 'fade' ? (index === currentIndex ? 'opacity-100' : 'opacity-0') : '') },
+        React.createElement("div", { className: "absolute inset-0 w-full h-full" },
+            React.createElement("img", { src: item.imageSrc, alt: item.imageAlt || item.title, className: buildClassesByJoining('w-full h-full', roundedClasses[rounded], objectFitClasses[objectFit], objectPositionClasses[objectPosition], imageClassName), style: { objectFit: objectFit } }),
+            withOverlay && (React.createElement("div", { className: buildClassesByJoining('absolute inset-0', overlayClasses[overlayStyle], roundedClasses[rounded]), style: item.overlayOpacity ? { opacity: item.overlayOpacity } : {} }))),
+        item.customContent || (React.createElement("div", { className: buildClassesByJoining('relative h-full w-full flex flex-col px-6', textPositionClasses[textPosition], textAlignmentClasses[textAlignment], contentClassName) },
+            React.createElement("h2", { className: buildClassesByJoining('text-3xl sm:text-4xl md:text-5xl font-bold text-white mb-2', titleClassName) }, item.title),
+            React.createElement("p", { className: buildClassesByJoining('text-xl text-white/80 max-w-2xl', subtitleClassName) }, item.subtitle),
+            item.buttonText && item.buttonLink && (React.createElement("a", { href: item.buttonLink, className: buildClassesByJoining('mt-4 px-6 py-2 bg-white text-black font-medium hover:bg-opacity-90 transition-colors inline-block', buttonRoundedClasses[buttonRounded], buttonClassName) }, item.buttonText)))))); };
+    // Pre jeden slide použijeme zjednodušený výstup
+    if (items.length === 1) {
+        var item = items[0];
+        return (React.createElement("div", { className: buildClassesByJoining('relative overflow-hidden w-full', heightClasses[height], roundedClasses[rounded], className) }, renderItem ? renderItem(item, 0) : renderDefaultItem(item, 0)));
+    }
+    // Pre viac slideov vytvoríme karusel
+    return (React.createElement("div", { className: buildClassesByJoining('relative overflow-hidden w-full', heightClasses[height], roundedClasses[rounded], className), onMouseEnter: function () { return pauseOnHover && setIsHovered(true); }, onMouseLeave: function () { return pauseOnHover && setIsHovered(false); } },
+        React.createElement("div", { className: buildClassesByJoining('flex h-full', animationClasses[animation]), style: animation === 'slide'
+                ? { transform: "translateX(-".concat(currentIndex * 100, "%)") }
+                : {} }, items.map(function (item, index) {
+            return renderItem ? renderItem(item, index) : renderDefaultItem(item, index);
+        })),
+        showArrows &&
+            items.length > 1 &&
+            (renderControls ? (renderControls(goToNext, goToPrev)) : (React.createElement(React.Fragment, null,
+                React.createElement("button", { onClick: goToPrev, className: buildClassesByJoining('absolute left-4 top-1/2 -translate-y-1/2 w-10 h-10 flex items-center justify-center rounded-full bg-black/30 hover:bg-black/50 text-white transition-colors', controlsClassName), "aria-label": "P\u0159edchoz\u00ED" },
+                    React.createElement(ChevronLeftIcon, { className: "h-6 w-6" })),
+                React.createElement("button", { onClick: goToNext, className: buildClassesByJoining('absolute right-4 top-1/2 -translate-y-1/2 w-10 h-10 flex items-center justify-center rounded-full bg-black/30 hover:bg-black/50 text-white transition-colors', controlsClassName), "aria-label": "Dal\u0161\u00ED" },
+                    React.createElement(ChevronRightIcon, { className: "h-6 w-6" }))))),
+        showDots &&
+            items.length > 1 &&
+            (renderIndicators ? (renderIndicators(currentIndex, items.length, goToSlide)) : (React.createElement("div", { className: buildClassesByJoining('absolute bottom-4 left-1/2 -translate-x-1/2 flex gap-2', indicatorsClassName) }, items.map(function (_, index) { return (React.createElement("button", { key: index, onClick: function () { return goToSlide(index); }, className: buildClassesByJoining('w-3 h-3 rounded-full transition-colors', index === currentIndex
+                    ? 'bg-white'
+                    : 'bg-white/40 hover:bg-white/60'), "aria-label": "P\u0159ej\u00EDt na slide ".concat(index + 1) })); }))))));
+};

package/dist/components/button/Button.js

@@ -0,0 +1,7 @@
+// src/components/Button.tsx
+import React from 'react';
+var Button = function (_a) {
+    var onClick = _a.onClick, label = _a.label, _b = _a.variant, variant = _b === void 0 ? 'primary' : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c;
+    return (React.createElement("button", { onClick: onClick, className: "px-4 py-2 rounded text-white cursor-pointer ".concat(variant === 'primary' ? 'bg-blue-500' : 'bg-gray-500', " ").concat(disabled ? 'opacity-50 cursor-not-allowed' : ''), disabled: disabled }, label));
+};
+export default Button;

package/dist/components/icon/CloseIcon.js

@@ -0,0 +1,14 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import React from 'react';
+export var CloseIcon = function (props) { return (React.createElement("svg", __assign({ width: 16, height: 16, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", className: props.className, onClick: props.onClick, onMouseDown: props.onMouseDown }, props),
+    React.createElement("path", { d: "M6 18L18 6M6 6l12 12", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }))); };

package/dist/components/icon/InfoIcon.js

@@ -0,0 +1,15 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import React from 'react';
+export var InfoIcon = function (props) { return (React.createElement("svg", __assign({ className: "w-4 h-4 text-blue-600 ".concat(props.className || ''), fill: "none", stroke: "currentColor", strokeWidth: "2", viewBox: "0 0 24 24" }, props),
+    React.createElement("circle", { cx: "12", cy: "12", r: "10", stroke: "currentColor" }),
+    React.createElement("path", { d: "M12 8v4m0 4h.01", stroke: "currentColor" }))); };

package/dist/components/label/Label.js

@@ -0,0 +1,11 @@
+import React from "react";
+var Label = function (_a) {
+    var text = _a.text, i18nKey = _a.i18nKey, isRequired = _a.isRequired, htmlFor = _a.htmlFor, subtitle = _a.subtitle, srOnly = _a.srOnly, _b = _a.className, className = _b === void 0 ? '' : _b;
+    if (!text && !i18nKey)
+        return null;
+    return (React.createElement("label", { htmlFor: htmlFor, className: "text-sm font-medium text-gray-700 flex flex-col ".concat(srOnly ? 'sr-only' : '', " ").concat(className) },
+        React.createElement("span", null, text || i18nKey),
+        isRequired && React.createElement("span", { className: "ml-1 text-red-500" }, "*"),
+        subtitle && React.createElement("span", { className: "text-xs text-gray-500" }, subtitle)));
+};
+export default Label;

package/dist/components/nav-bar/NavBar.js

@@ -0,0 +1,36 @@
+'use client';
+import { Bars3Icon, XMarkIcon } from '@heroicons/react/24/outline';
+import React, { useState } from 'react';
+import buildClassesByJoining from '../../utils/StyleHelper';
+export var NavBar = function (_a) {
+    var 
+    // Structure
+    _b = _a.items, 
+    // Structure
+    items = _b === void 0 ? [] : _b, 
+    // Logo
+    _c = _a.logo, 
+    // Logo
+    logo = _c === void 0 ? React.createElement("div", { className: "h-8 w-8 bg-indigo-600 rounded-md" }) : _c, 
+    // Right side elements
+    rightContent = _a.rightContent, 
+    // Styling
+    _d = _a.backgroundColor, 
+    // Styling
+    backgroundColor = _d === void 0 ? 'bg-white' : _d, _e = _a.textColor, textColor = _e === void 0 ? 'text-gray-600' : _e, _f = _a.activeColor, activeColor = _f === void 0 ? 'text-indigo-600' : _f, _g = _a.mobileMenuBgColor, mobileMenuBgColor = _g === void 0 ? 'bg-white' : _g, _h = _a.containerClassName, containerClassName = _h === void 0 ? '' : _h, _j = _a.navClassName, navClassName = _j === void 0 ? '' : _j, _k = _a.itemClassName, itemClassName = _k === void 0 ? '' : _k, _l = _a.mobileItemClassName, mobileItemClassName = _l === void 0 ? '' : _l;
+    var _m = useState(false), mobileMenuOpen = _m[0], setMobileMenuOpen = _m[1];
+    return (React.createElement("header", { className: buildClassesByJoining(backgroundColor, containerClassName) },
+        React.createElement("nav", { className: buildClassesByJoining('mx-auto max-w-7xl px-4 sm:px-6 lg:px-8', navClassName) },
+            React.createElement("div", { className: "flex h-16 items-center justify-between" },
+                React.createElement("div", { className: "flex-shrink-0" }, logo),
+                React.createElement("div", { className: "flex md:hidden" },
+                    React.createElement("button", { type: "button", className: buildClassesByJoining('inline-flex items-center justify-center rounded-md p-2', textColor, "hover:".concat(activeColor, " hover:bg-gray-100")), onClick: function () { return setMobileMenuOpen(!mobileMenuOpen); } },
+                        React.createElement("span", { className: "sr-only" }, "Open main menu"),
+                        mobileMenuOpen ? (React.createElement(XMarkIcon, { className: "block h-6 w-6", "aria-hidden": "true" })) : (React.createElement(Bars3Icon, { className: "block h-6 w-6", "aria-hidden": "true" })))),
+                React.createElement("div", { className: "hidden md:flex md:flex-1 md:items-center md:justify-center md:space-x-8" }, items.map(function (item) { return (React.createElement("a", { key: item.name, href: item.href, className: buildClassesByJoining('text-sm font-medium', textColor, "hover:".concat(activeColor), itemClassName) }, item.name)); })),
+                rightContent && (React.createElement("div", { className: "hidden md:flex md:items-center" }, rightContent)))),
+        mobileMenuOpen && (React.createElement("div", { className: buildClassesByJoining('md:hidden', mobileMenuBgColor) },
+            React.createElement("div", { className: "space-y-1 px-2 pb-3 pt-2" }, items.map(function (item) { return (React.createElement("a", { key: item.name, href: item.href, className: buildClassesByJoining('block rounded-md px-3 py-2 text-base font-medium', textColor, "hover:".concat(activeColor, " hover:bg-gray-100"), mobileItemClassName) }, item.name)); })),
+            rightContent && (React.createElement("div", { className: "border-t border-gray-200 pb-3 pt-4" },
+                React.createElement("div", { className: "flex items-center px-5" }, rightContent)))))));
+};

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

@@ -0,0 +1,148 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { MinusIcon, PlusIcon } from '@heroicons/react/24/solid';
+import React, { useState } from 'react';
+import { buildClassesByJoining } from '../../utils/StyleHelper';
+// Quantity Control Component
+var QuantityControl = function (_a) {
+    var quantity = _a.quantity, onIncrement = _a.onIncrement, onDecrement = _a.onDecrement, _b = _a.minQuantity, minQuantity = _b === void 0 ? 0 : _b, _c = _a.maxQuantity, maxQuantity = _c === void 0 ? 99 : _c, _d = _a.controlsClassName, controlsClassName = _d === void 0 ? '' : _d, _e = _a.buttonClassName, buttonClassName = _e === void 0 ? '' : _e, _f = _a.quantityClassName, quantityClassName = _f === void 0 ? '' : _f;
+    return (React.createElement("div", { className: buildClassesByJoining('flex items-center gap-2', controlsClassName) },
+        React.createElement("button", { onClick: onDecrement, disabled: quantity <= minQuantity, className: buildClassesByJoining('w-8 h-8 flex items-center justify-center rounded-full bg-red-500 text-white hover:bg-red-600 disabled:opacity-50 disabled:bg-red-300 disabled:cursor-not-allowed shadow-sm transition-all duration-200', buttonClassName), "aria-label": "Decrease quantity" },
+            React.createElement(MinusIcon, { className: "h-4 w-4" })),
+        React.createElement("div", { className: buildClassesByJoining('w-8 h-8 rounded-full bg-white flex items-center justify-center text-sm font-medium shadow-sm transition-all duration-200', quantityClassName) }, quantity),
+        React.createElement("button", { onClick: onIncrement, disabled: quantity >= maxQuantity, className: buildClassesByJoining('w-8 h-8 flex items-center justify-center rounded-full bg-green-500 text-white hover:bg-green-600 disabled:opacity-50 disabled:bg-green-300 disabled:cursor-not-allowed shadow-sm transition-all duration-200', buttonClassName), "aria-label": "Increase quantity" },
+            React.createElement(PlusIcon, { className: "h-4 w-4" }))));
+};
+export var ProductCard = function (_a) {
+    var product = _a.product, className = _a.className, imageClassName = _a.imageClassName, contentClassName = _a.contentClassName, titleClassName = _a.titleClassName, colorClassName = _a.colorClassName, priceClassName = _a.priceClassName, descriptionClassName = _a.descriptionClassName, badgeClassName = _a.badgeClassName, _b = _a.aspectRatio, aspectRatio = _b === void 0 ? 'square' : _b, _c = _a.imagePosition, imagePosition = _c === void 0 ? 'center' : _c, _d = _a.imageObjectFit, imageObjectFit = _d === void 0 ? 'cover' : _d, _e = _a.layout, layout = _e === void 0 ? 'default' : _e, _f = _a.hoverEffect, hoverEffect = _f === void 0 ? 'opacity' : _f, _g = _a.renderBadges, renderBadges = _g === void 0 ? true : _g, _h = _a.renderColor, renderColor = _h === void 0 ? true : _h, _j = _a.renderDescription, renderDescription = _j === void 0 ? false : _j, _k = _a.elevationLevel, elevationLevel = _k === void 0 ? 0 : _k, _l = _a.rounded, rounded = _l === void 0 ? 'md' : _l, _m = _a.titleLines, titleLines = _m === void 0 ? 1 : _m, onCardClick = _a.onCardClick, onImageClick = _a.onImageClick, renderFooter = _a.renderFooter, renderHeader = _a.renderHeader, actionButton = _a.actionButton, 
+    // Add to cart functionality
+    _o = _a.showAddButton, 
+    // Add to cart functionality
+    showAddButton = _o === void 0 ? false : _o, _p = _a.initialQuantity, initialQuantity = _p === void 0 ? 0 : _p, onQuantityChange = _a.onQuantityChange, _q = _a.addButtonIcon, addButtonIcon = _q === void 0 ? React.createElement(PlusIcon, { className: "h-4 w-4" }) : _q, _r = _a.maxQuantity, maxQuantity = _r === void 0 ? 99 : _r, _s = _a.quantityControlProps, quantityControlProps = _s === void 0 ? {} : _s, customAddButton = _a.customAddButton, customQuantityControl = _a.customQuantityControl;
+    var _t = useState(initialQuantity), quantity = _t[0], setQuantity = _t[1];
+    var _u = useState(initialQuantity > 0), showQuantityControls = _u[0], setShowQuantityControls = _u[1];
+    // Create aspect ratio class
+    var aspectRatioClass = {
+        square: 'aspect-square',
+        auto: 'aspect-auto',
+        video: 'aspect-video',
+        wide: 'aspect-[16/9]',
+    }[aspectRatio];
+    // Create object-fit class
+    var objectFitClass = {
+        cover: 'object-cover',
+        contain: 'object-contain',
+        fill: 'object-fill',
+        none: 'object-none',
+    }[imageObjectFit];
+    // Create object-position class
+    var objectPositionClass = {
+        top: 'object-top',
+        center: 'object-center',
+        bottom: 'object-bottom',
+    }[imagePosition];
+    // Create hover effect class
+    var 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
+    var elevationClass = {
+        0: '',
+        1: 'shadow-sm',
+        2: 'shadow',
+        3: 'shadow-md',
+    }[elevationLevel];
+    // Create rounded class
+    var roundedClass = {
+        none: 'rounded-none',
+        sm: 'rounded-sm',
+        md: 'rounded-md',
+        lg: 'rounded-lg',
+        full: 'rounded-full',
+    }[rounded];
+    // Create title line clamp class
+    var titleLineClampClass = {
+        1: 'line-clamp-1',
+        2: 'line-clamp-2',
+        3: 'line-clamp-3',
+    }[titleLines];
+    // Create layout class
+    var layoutClass = layout === 'horizontal' ? 'flex gap-4' : '';
+    var imageLayoutClass = layout === 'horizontal' ? 'w-1/3' : 'w-full';
+    var contentLayoutClass = layout === 'horizontal' ? 'w-2/3' : 'w-full';
+    var compactClass = layout === 'compact' ? 'space-y-1' : 'space-y-2';
+    var handleCardClick = function () {
+        onCardClick && onCardClick(product);
+    };
+    var handleImageClick = function (e) {
+        if (onImageClick) {
+            e.stopPropagation();
+            onImageClick(product);
+        }
+    };
+    var handleAddToCart = function (e) {
+        e.stopPropagation(); // Prevent card click
+        setShowQuantityControls(true);
+        setQuantity(1);
+        onQuantityChange && onQuantityChange(product, 1);
+    };
+    var handleIncrement = function (e) {
+        e.stopPropagation(); // Prevent card click
+        var newQuantity = Math.min(quantity + 1, maxQuantity);
+        setQuantity(newQuantity);
+        onQuantityChange && onQuantityChange(product, newQuantity);
+    };
+    var handleDecrement = function (e) {
+        e.stopPropagation(); // Prevent card click
+        var newQuantity = Math.max(quantity - 1, 0);
+        if (newQuantity === 0) {
+            setQuantity(0);
+            // Use timeout to allow animation to play before hiding
+            setTimeout(function () {
+                setShowQuantityControls(false);
+            }, 300);
+        }
+        else {
+            setQuantity(newQuantity);
+        }
+        onQuantityChange && onQuantityChange(product, newQuantity);
+    };
+    return (React.createElement("div", { key: product.id, className: buildClassesByJoining('group relative', layoutClass, elevationClass, onCardClick ? 'cursor-pointer' : '', className), onClick: handleCardClick },
+        renderHeader && renderHeader(product),
+        React.createElement("div", { className: buildClassesByJoining(imageLayoutClass, 'relative') },
+            product.badges && renderBadges && (React.createElement("div", { className: "absolute top-2 left-2 z-10 flex flex-wrap gap-1" }, product.badges.map(function (badge, index) { return (React.createElement("span", { key: index, className: buildClassesByJoining("inline-flex items-center px-2 py-1 text-xs font-medium ".concat(badge.color), roundedClass, badgeClassName) }, badge.text)); }))),
+            React.createElement("img", { alt: product.imageAlt, src: product.imageSrc, className: buildClassesByJoining(aspectRatioClass, objectFitClass, objectPositionClass, hoverEffect !== 'none' ? hoverClass : '', roundedClass, 'bg-gray-200', onImageClick ? 'cursor-pointer' : '', imageClassName), onClick: handleImageClick }),
+            (showAddButton || showQuantityControls) && (React.createElement("div", { className: buildClassesByJoining('absolute bottom-2 right-2 z-10'), onClick: function (e) { return e.stopPropagation(); } },
+                React.createElement("div", { className: "relative" },
+                    React.createElement("div", { className: buildClassesByJoining('transition-all duration-300 ease-in-out transform', showQuantityControls
+                            ? 'scale-0 opacity-0'
+                            : 'scale-100 opacity-100') }, customAddButton || (React.createElement("button", { onClick: handleAddToCart, className: buildClassesByJoining('p-2 w-10 h-10 flex items-center justify-center rounded-full bg-green-500 text-white shadow-md hover:bg-green-600 transition-colors duration-200'), "aria-label": "Add to cart" }, addButtonIcon))),
+                    React.createElement("div", { className: buildClassesByJoining('absolute top-0 right-0 transition-all duration-300 ease-in-out transform origin-right', !showQuantityControls
+                            ? 'scale-0 opacity-0'
+                            : 'scale-100 opacity-100') }, customQuantityControl || (React.createElement(QuantityControl, __assign({ quantity: quantity, onIncrement: handleIncrement, onDecrement: handleDecrement, minQuantity: 0, maxQuantity: maxQuantity }, quantityControlProps)))))))),
+        React.createElement("div", { className: buildClassesByJoining('mt-4', contentLayoutClass, compactClass, contentClassName) },
+            React.createElement("div", { className: "flex justify-between" },
+                React.createElement("div", null,
+                    React.createElement("h3", { className: buildClassesByJoining('text-sm text-gray-700', titleLineClampClass, titleClassName) },
+                        React.createElement("a", { href: product.href },
+                            !onCardClick && (React.createElement("span", { "aria-hidden": "true", className: "absolute inset-0" })),
+                            product.name)),
+                    renderColor && product.color && (React.createElement("p", { className: buildClassesByJoining('mt-1 text-sm text-gray-500', colorClassName) }, product.color)),
+                    renderDescription && product.description && (React.createElement("p", { className: buildClassesByJoining('mt-1 text-sm text-gray-500 line-clamp-2', descriptionClassName) }, product.description))),
+                React.createElement("p", { className: buildClassesByJoining('text-sm font-medium text-gray-900', priceClassName) }, product.price)),
+            actionButton && React.createElement("div", { className: "mt-2" }, actionButton),
+            renderFooter && renderFooter(product))));
+};

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

@@ -0,0 +1,132 @@
+'use client';
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { buildClassesByJoining } from '../../utils/StyleHelper';
+import React, { forwardRef, isValidElement, useId } from 'react';
+import ReactSelect from 'react-select';
+import Badge from '../badge/Badge';
+import { CloseIcon } from '../icon/CloseIcon';
+import { InfoIcon } from '../icon/InfoIcon';
+import Label from '../label/Label';
+import Tooltip from '../tooltip/Tooltip';
+import SelectFieldOption from './SelectFieldOption';
+function SelectFieldComponent(_a, ref) {
+    var _b;
+    var _c, _d;
+    var id = _a.id, label = _a.label, isRequired = _a.isRequired, srOnlyLabel = _a.srOnlyLabel, _e = _a.selectFieldType, selectFieldType = _e === void 0 ? 'default' : _e, subtitle = _a.subtitle, _f = _a.size, size = _f === void 0 ? 'md' : _f, _g = _a.color, color = _g === void 0 ? 'primary' : _g, _h = _a.valid, valid = _h === void 0 ? true : _h, className = _a.className, message = _a.message, _j = _a.placeholder, placeholder = _j === void 0 ? selectFieldType === 'table' ? '...' : '' : _j, _k = _a.isSearchable, isSearchable = _k === void 0 ? false : _k, removePaddingTop = _a.removePaddingTop, _l = _a.menuPosition, menuPosition = _l === void 0 ? 'fixed' : _l, renderMessageInTooltip = _a.renderMessageInTooltip, tooltipRef = _a.tooltipRef, disablePortal = _a.disablePortal, tooltipMessage = _a.tooltipMessage, isMulti = _a.isMulti, _m = _a.typeSelect, typeSelect = _m === void 0 ? isMulti ? 'multi' : 'single' : _m, badgeLabelClassName = _a.badgeLabelClassName, customStyles = _a.styles, props = __rest(_a, ["id", "label", "isRequired", "srOnlyLabel", "selectFieldType", "subtitle", "size", "color", "valid", "className", "message", "placeholder", "isSearchable", "removePaddingTop", "menuPosition", "renderMessageInTooltip", "tooltipRef", "disablePortal", "tooltipMessage", "isMulti", "typeSelect", "badgeLabelClassName", "styles"]);
+    var randomId = useId();
+    var isMultiSelect = typeSelect === 'multi';
+    var renderMessage = function () {
+        return message && React.createElement("span", { className: "text-xs mt-1 block text-gray-500" }, message);
+    };
+    var containerClassName = buildClassesByJoining((_b = {
+            invalid: !valid
+        },
+        _b[color] = true,
+        _b[size] = true,
+        _b.selector = true,
+        _b['!pt-0'] = removePaddingTop,
+        _b['shadow-sm'] = selectFieldType === 'table',
+        _b['font-medium'] = selectFieldType === 'table',
+        _b), className, 'flex flex-col gap-2');
+    var testAttributes = {
+        'data-test-element': 'select',
+        'data-test-element-type': typeSelect === 'multi' ? 'multi-select' : 'single-select',
+        'data-test-name': props === null || props === void 0 ? void 0 : props.name,
+        'data-test-selected-label': (_c = props === null || props === void 0 ? void 0 : props.value) === null || _c === void 0 ? void 0 : _c.label,
+        'data-test-selected-value': (_d = props === null || props === void 0 ? void 0 : props.value) === null || _d === void 0 ? void 0 : _d.value,
+        'data-test-is-disabled': props === null || props === void 0 ? void 0 : props.isDisabled,
+    };
+    var renderOptionBadge = function (_a) {
+        var children = _a.children, removeProps = _a.removeProps;
+        return (React.createElement(Badge, { color: "bg-blue-100 text-blue-800", rightIcon: React.createElement(CloseIcon, { onMouseDown: function (event) {
+                    event.preventDefault();
+                    event.stopPropagation();
+                }, onClick: function (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));
+    };
+    var getMultiValueComponent = function (props) {
+        var selectedValues = props.getValue();
+        if (selectFieldType === 'table') {
+            return (props.index === 0 && (React.createElement(React.Fragment, null,
+                renderOptionBadge(props),
+                selectedValues.length > 1 && (React.createElement(Badge, { color: "bg-blue-100 text-blue-800", className: "m-1" },
+                    React.createElement("span", null,
+                        "+",
+                        selectedValues.length - 1))))));
+        }
+        return renderOptionBadge(props);
+    };
+    var renderInput = function () {
+        var _a;
+        var getBaseStyles = function () { return (__assign(__assign({}, customStyles), { indicatorSeparator: function (base) { return (__assign(__assign({}, base), { display: 'none' })); }, placeholder: function (base) { return (__assign(__assign({}, base), { opacity: 0.4, fontWeight: 'normal', fontSize: selectFieldType === 'table' ? '1rem' : '0.75rem' })); }, control: function (base) { return (__assign(__assign({}, base), { paddingLeft: selectFieldType === 'table' ? '4px' : '0' })); }, dropdownIndicator: function (base, state) { return (__assign(__assign({}, base), { opacity: state.isFocused || state.selectProps.menuIsOpen ? 1 : 0.4 })); }, singleValue: function (base) {
+                if (typeSelect !== 'single-badges') {
+                    return base;
+                }
+                return __assign(__assign({}, base), { backgroundColor: '#E5EFFE', border: '0.063rem solid #A0AEC0', color: '#374151 !important', padding: '0.125rem 0.625rem', fontSize: '0.75rem', borderRadius: '6px', width: 'fit-content' });
+            } })); };
+        var commonProps = {
+            id: id || randomId,
+            instanceId: id || randomId,
+            isSearchable: isSearchable,
+            className: buildClassesByJoining((_a = {},
+                _a[size] = true,
+                _a), 'selector-container'),
+            menuPortalTarget: typeof document !== 'undefined' && menuPosition === 'fixed' && !disablePortal
+                ? document.body
+                : undefined,
+            classNamePrefix: 'selector',
+            placeholder: placeholder,
+            menuPosition: menuPosition,
+            openMenuOnFocus: true,
+            openMenuOnClick: true,
+            noOptionsMessage: function () { return (React.createElement("div", { className: "text-gray-500 text-sm" }, "No options available")); },
+        };
+        return (React.createElement(React.Fragment, null,
+            React.createElement("div", __assign({}, testAttributes), isMultiSelect ? (React.createElement(ReactSelect, __assign({}, props, commonProps, { styles: getBaseStyles(), isMulti: true, ref: ref, components: {
+                    Option: SelectFieldOption,
+                    MultiValue: getMultiValueComponent,
+                } }))) : (React.createElement(ReactSelect, __assign({}, props, commonProps, { styles: getBaseStyles(), isMulti: false, ref: ref, components: {
+                    Option: SelectFieldOption,
+                    MultiValue: getMultiValueComponent,
+                } })))),
+            !renderMessageInTooltip && renderMessage()));
+    };
+    var renderTooltip = function () {
+        return (React.createElement("span", { className: "flex items-center gap-1 pb-1" },
+            React.createElement(Tooltip, { placement: "top", content: tooltipMessage, contentClassName: "max-w-64" },
+                React.createElement(InfoIcon, null))));
+    };
+    return (React.createElement("div", { className: containerClassName },
+        (!!(label === null || label === void 0 ? void 0 : label.length) || isValidElement(tooltipMessage)) && (React.createElement("div", { className: "flex gap-1" },
+            React.createElement(Label, { text: label, isRequired: isRequired, htmlFor: randomId, subtitle: subtitle, srOnly: srOnlyLabel }),
+            tooltipMessage && renderTooltip())),
+        React.createElement("div", { className: "flex flex-col relative" }, renderMessageInTooltip ? (React.createElement(Tooltip, { content: message, backgroundColor: !valid ? 'bg-red-500' : 'bg-blue-500', textColor: "text-white", ref: tooltipRef, disabled: !renderMessageInTooltip || !message, lazy: false }, renderInput())) : (renderInput()))));
+}
+var SelectField = forwardRef(SelectFieldComponent);
+export default SelectField;

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

@@ -0,0 +1,31 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import { components } from 'react-select';
+var SelectFieldOption = function (_a) {
+    var children = _a.children, data = _a.data, props = __rest(_a, ["children", "data"]);
+    var optionData = data;
+    return (React.createElement(components.Option, __assign({}, props, { data: data }),
+        React.createElement("span", { "data-test-option": JSON.stringify(optionData), "data-test-option-value": optionData.value, "data-test-option-label": optionData.label }, children)));
+};
+export default SelectFieldOption;