@pagamio/frontend-commons-lib 0.8.302 → 0.8.304

package/lib/components/ecommerce/ProductCard.js

@@ -36,7 +36,7 @@ export function ProductCard({ product, onAddToCart, isAddingToCart, storeId, bas
         }
         return (_jsx("a", { href: productUrl, className: className, tabIndex: tabIndex, "aria-label": ariaLabel, children: children }));
     };
-    return (_jsxs("div", { className: cn('group relative flex flex-col overflow-hidden bg-background transition-shadow duration-200', 'rounded-lg sm:rounded-xl', 'hover:shadow-lg', featured ? 'border-2 border-foreground shadow-md' : 'border border-border shadow-sm'), children: [_jsxs(LinkWrapper, { className: "relative block aspect-square w-full overflow-hidden bg-muted", tabIndex: -1, ariaLabel: `View ${product.name}`, children: [product.imageUrl ? (_jsx(ImageComponent, { src: product.imageUrl, alt: product.name, fill: true, className: "object-cover", sizes: "(max-width: 640px) 50vw, (max-width: 1024px) 33vw, 25vw" })) : (_jsx("div", { className: "flex h-full w-full items-center justify-center bg-muted text-muted-foreground", children: _jsx("svg", { className: "h-10 w-10 sm:h-12 sm:w-12", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1, d: "M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" }) }) })), !hasStock && !isBackorderable && (_jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-black/40", children: _jsx("span", { className: "rounded-full bg-white/90 px-3 py-1 text-[11px] font-bold uppercase tracking-wide text-foreground sm:px-4 sm:py-1.5 sm:text-xs", children: "Out of Stock" }) })), !hasStock && isBackorderable && (_jsx("div", { className: "absolute left-2 top-2 z-10 rounded-full bg-warning px-2 py-0.5 text-[10px] font-bold uppercase tracking-wide text-white sm:left-3 sm:top-3 sm:px-2.5 sm:py-1", children: "Backorder" })), featured && hasStock && (_jsx("div", { className: "absolute left-2 top-2 z-10 rounded-full bg-foreground px-2 py-0.5 text-[10px] font-bold uppercase tracking-wide text-white sm:left-3 sm:top-3 sm:px-2.5 sm:py-1", children: "Popular" }))] }), _jsxs("div", { className: "flex flex-1 flex-col p-2 sm:p-4", children: [product.category && (_jsx("span", { className: "mb-0.5 hidden text-[10px] font-medium uppercase tracking-wide text-muted-foreground sm:block", children: product.category.name })), _jsx(LinkWrapper, { children: _jsx("h3", { className: "line-clamp-2 text-xs font-medium leading-snug text-foreground transition-colors hover:text-primary sm:text-sm", children: product.name }) }), _jsx("div", { className: "flex-1" }), _jsxs("div", { className: "mt-1.5 sm:mt-3", children: [_jsxs("div", { className: "flex items-baseline justify-between gap-1", children: [_jsx("span", { className: "text-sm font-bold text-foreground sm:text-base", children: priceDisplay }), hasVariants && (_jsxs("span", { className: "hidden text-[11px] font-medium text-muted-foreground sm:inline", children: [product.variants.length, " option", product.variants.length !== 1 ? 's' : ''] }))] }), isLowStock && _jsxs("p", { className: "mt-0.5 text-[11px] font-medium text-warning", children: ["Only ", product.totalStock, " left"] }), hasStock && !isLowStock && (_jsxs("p", { className: "mt-0.5 hidden text-[11px] text-muted-foreground sm:block", children: [product.totalStock, " in stock"] }))] }), _jsx("button", { type: "button", disabled: hasVariants ? !hasStock && !isBackorderable : !canAddToCart || isAddingToCart, onClick: (e) => {
+    return (_jsxs("div", { className: cn('group relative flex flex-col overflow-hidden bg-background transition-shadow duration-200', 'rounded-lg sm:rounded-xl', 'hover:shadow-lg', featured ? 'border-2 border-foreground shadow-md' : 'border border-border shadow-sm'), children: [_jsxs(LinkWrapper, { className: "relative block aspect-[4/3] w-full overflow-hidden bg-muted", tabIndex: -1, ariaLabel: `View ${product.name}`, children: [product.imageUrl ? (_jsx(ImageComponent, { src: product.imageUrl, alt: product.name, fill: true, className: "object-cover", sizes: "(max-width: 640px) 50vw, (max-width: 1024px) 33vw, 25vw" })) : (_jsx("div", { className: "flex h-full w-full items-center justify-center bg-muted text-muted-foreground", children: _jsx("svg", { className: "h-8 w-8", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1, d: "M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" }) }) })), !hasStock && !isBackorderable && (_jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-black/40", children: _jsx("span", { className: "rounded-full bg-white/90 px-3 py-1 text-[11px] font-bold uppercase tracking-wide text-foreground sm:px-4 sm:py-1.5 sm:text-xs", children: "Out of Stock" }) })), !hasStock && isBackorderable && (_jsx("div", { className: "absolute left-2 top-2 z-10 rounded-full bg-warning px-2 py-0.5 text-[10px] font-bold uppercase tracking-wide text-white sm:left-3 sm:top-3 sm:px-2.5 sm:py-1", children: "Backorder" })), featured && hasStock && (_jsx("div", { className: "absolute left-2 top-2 z-10 rounded-full bg-foreground px-2 py-0.5 text-[10px] font-bold uppercase tracking-wide text-white sm:left-3 sm:top-3 sm:px-2.5 sm:py-1", children: "Popular" }))] }), _jsxs("div", { className: "flex flex-1 flex-col p-2", children: [_jsx(LinkWrapper, { children: _jsx("h3", { className: "line-clamp-2 text-xs font-medium leading-snug text-foreground transition-colors hover:text-primary", children: product.name }) }), _jsx("div", { className: "flex-1" }), _jsxs("div", { className: "mt-1", children: [_jsxs("div", { className: "flex items-baseline justify-between gap-1", children: [_jsx("span", { className: "text-xs font-bold text-foreground sm:text-sm", children: priceDisplay }), hasVariants && (_jsxs("span", { className: "text-[10px] font-medium text-muted-foreground", children: [product.variants.length, " opt"] }))] }), isLowStock && _jsxs("p", { className: "mt-0.5 text-[10px] font-medium text-warning", children: ["Only ", product.totalStock, " left"] })] }), _jsx("button", { type: "button", disabled: hasVariants ? !hasStock && !isBackorderable : !canAddToCart || isAddingToCart, onClick: (e) => {
                             e.preventDefault();
                             e.stopPropagation();
                             if (hasVariants) {
@@ -50,7 +50,7 @@ export function ProductCard({ product, onAddToCart, isAddingToCart, storeId, bas
                             else if (onAddToCart && canAddToCart) {
                                 onAddToCart(product);
                             }
-                        }, className: cn('mt-2 flex h-8 w-full items-center justify-center gap-1.5 rounded-lg text-xs font-medium transition-colors sm:mt-3 sm:h-9 sm:text-sm', hasVariants
+                        }, className: cn('mt-1.5 flex h-7 w-full items-center justify-center gap-1 rounded-md text-[11px] font-medium transition-colors sm:h-8', hasVariants
                             ? hasStock || isBackorderable
                                 ? 'bg-foreground text-background hover:bg-foreground/90 active:bg-foreground/80'
                                 : 'cursor-not-allowed bg-muted text-muted-foreground'

package/lib/components/ecommerce/ProductCardSkeleton.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Skeleton } from '../ui/Skeleton';
 export function ProductCardSkeleton() {
-    return (_jsxs("div", { className: "overflow-hidden rounded-lg border border-border bg-background sm:rounded-xl", children: [_jsx(Skeleton, { className: "aspect-square w-full rounded-none" }), _jsxs("div", { className: "space-y-2 p-2 sm:p-4", children: [_jsx(Skeleton, { className: "h-3 w-3/4" }), _jsx(Skeleton, { className: "h-3 w-1/2" }), _jsx("div", { className: "pt-1", children: _jsx(Skeleton, { className: "h-4 w-20" }) }), _jsx(Skeleton, { className: "h-8 w-full rounded-lg sm:h-9" })] })] }));
+    return (_jsxs("div", { className: "overflow-hidden rounded-lg border border-border bg-background sm:rounded-xl", children: [_jsx(Skeleton, { className: "aspect-[4/3] w-full rounded-none" }), _jsxs("div", { className: "space-y-1.5 p-2", children: [_jsx(Skeleton, { className: "h-3 w-3/4" }), _jsx(Skeleton, { className: "h-3 w-1/2" }), _jsx(Skeleton, { className: "h-7 w-full rounded-md sm:h-8" })] })] }));
 }

package/lib/components/ecommerce/ProductGrid.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import EmptyState from '../ui/EmptyState';
 import { ProductCard } from './ProductCard';
 import { ProductCardSkeleton } from './ProductCardSkeleton';
-const GRID_CLASSES = 'grid grid-cols-2 gap-2 sm:gap-4 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5';
+const GRID_CLASSES = 'grid grid-cols-2 gap-2 sm:grid-cols-3 sm:gap-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6';
 export function ProductGrid({ products, isLoading, onAddToCart, addingProductId, storeId, emptyMessage = 'No products found', basePath, linkSuffix, skeletonCount = 8, currency, renderLink, onNavigate, }) {
     if (isLoading) {
         return (_jsx("div", { className: GRID_CLASSES, children: Array.from({ length: skeletonCount }, (_, i) => (_jsx(ProductCardSkeleton, {}, i))) }));

package/lib/components/ui/Modal.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Modal as FlowbiteModal, ModalBody as FlowbiteModalBody, ModalFooter as FlowbiteModalFooter, ModalHeader as FlowbiteModalHeader, } from 'flowbite-react';
+import { Modal as FlowbiteModal, ModalBody as FlowbiteModalBody, ModalFooter as FlowbiteModalFooter, } from 'flowbite-react';
+import { HiX } from 'react-icons/hi';
 import { cn } from '../../helpers';
 import Button from './Button';
 /**
@@ -26,6 +27,6 @@ import Button from './Button';
  * ```
  */
 const Modal = ({ title, children, isOpen, onClose, size = 'md', dismissible = false, primaryButton, secondaryButton, headerContent, footerContent, className, ...rest }) => {
-    return (_jsxs(FlowbiteModal, { show: isOpen, onClose: onClose, size: size, dismissible: dismissible, className: cn('max-h-[90vh] mt-16 md:mt-0 md:max-h-full', className), ...rest, children: [_jsx(FlowbiteModalHeader, { className: cn(!(title ?? headerContent) && 'border-b-0 pb-0'), children: headerContent ?? title }), _jsx(FlowbiteModalBody, { children: _jsx("div", { className: "space-y-4", children: children }) }), (primaryButton || secondaryButton || footerContent) && (_jsx(FlowbiteModalFooter, { children: footerContent ?? (_jsxs("div", { className: "flex w-full justify-end gap-2", children: [secondaryButton && (_jsx(Button, { onClick: secondaryButton.onClick, variant: secondaryButton.variant ?? 'outline-primary', disabled: secondaryButton.loading ?? secondaryButton.disabled, className: secondaryButton.variant, children: secondaryButton.label })), primaryButton && (_jsx(Button, { onClick: primaryButton.onClick, variant: primaryButton.variant ?? 'primary', disabled: primaryButton.loading ?? primaryButton.disabled, className: primaryButton.variant, children: primaryButton.label }))] })) }))] }));
+    return (_jsxs(FlowbiteModal, { show: isOpen, onClose: onClose, size: size, dismissible: dismissible, className: cn('max-h-[90vh] mt-16 md:mt-0 md:max-h-full', className), ...rest, children: [_jsxs("div", { className: cn('flex items-center justify-between rounded-t border-b border-gray-200 p-4 dark:border-gray-600', !(title ?? headerContent) && 'border-b-0 pb-2'), children: [_jsx("div", { className: "text-xl font-semibold text-gray-900 dark:text-white", children: headerContent ?? title ?? null }), _jsxs("button", { type: "button", "aria-label": "Close", onClick: onClose, className: "ml-auto inline-flex items-center rounded-lg bg-transparent p-1.5 text-sm text-gray-400 hover:bg-gray-200 hover:text-gray-900 dark:hover:bg-gray-600 dark:hover:text-white", children: [_jsx(HiX, { className: "h-5 w-5" }), _jsx("span", { className: "sr-only", children: "Close modal" })] })] }), _jsx(FlowbiteModalBody, { children: _jsx("div", { className: "space-y-4", children: children }) }), (primaryButton || secondaryButton || footerContent) && (_jsx(FlowbiteModalFooter, { children: footerContent ?? (_jsxs("div", { className: "flex w-full justify-end gap-2", children: [secondaryButton && (_jsx(Button, { onClick: secondaryButton.onClick, variant: secondaryButton.variant ?? 'outline-primary', disabled: secondaryButton.loading ?? secondaryButton.disabled, className: secondaryButton.variant, children: secondaryButton.label })), primaryButton && (_jsx(Button, { onClick: primaryButton.onClick, variant: primaryButton.variant ?? 'primary', disabled: primaryButton.loading ?? primaryButton.disabled, className: primaryButton.variant, children: primaryButton.label }))] })) }))] }));
 };
 export default Modal;

package/lib/styles.css

@@ -977,9 +977,6 @@ video {
 .mb-0 {
   margin-bottom: 0px;
 }
-.mb-0\.5 {
-  margin-bottom: 0.125rem;
-}
 .mb-1 {
   margin-bottom: 0.25rem;
 }
@@ -1151,6 +1148,9 @@ video {
 .aspect-\[16\/9\] {
   aspect-ratio: 16/9;
 }
+.aspect-\[4\/3\] {
+  aspect-ratio: 4/3;
+}
 .aspect-square {
   aspect-ratio: 1 / 1;
 }
@@ -2922,6 +2922,9 @@ video {
 .pb-0 {
   padding-bottom: 0px;
 }
+.pb-2 {
+  padding-bottom: 0.5rem;
+}
 .pb-2\.5 {
   padding-bottom: 0.625rem;
 }
@@ -6398,6 +6401,10 @@ video {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 
+  .sm\:grid-cols-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
   .sm\:flex-row {
     flex-direction: row;
   }
@@ -6879,6 +6886,10 @@ video {
     grid-template-columns: repeat(4, minmax(0, 1fr));
   }
 
+  .lg\:grid-cols-5 {
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+  }
+
   .lg\:flex-row {
     flex-direction: row;
   }
@@ -6922,8 +6933,8 @@ video {
     display: none;
   }
 
-  .xl\:grid-cols-4 {
-    grid-template-columns: repeat(4, minmax(0, 1fr));
+  .xl\:grid-cols-6 {
+    grid-template-columns: repeat(6, minmax(0, 1fr));
   }
 
   .xl\:px-24 {
@@ -6940,10 +6951,6 @@ video {
   .\32xl\:hidden {
     display: none;
   }
-
-  .\32xl\:grid-cols-5 {
-    grid-template-columns: repeat(5, minmax(0, 1fr));
-  }
 }
 .rtl\:before\:-translate-x-5:where([dir="rtl"], [dir="rtl"] *)::before {
   content: var(--tw-content);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pagamio/frontend-commons-lib",
   "description": "Pagamio library for Frontend reusable components like the form engine and table container",
-  "version": "0.8.302",
+  "version": "0.8.304",
   "publishConfig": {
     "access": "public",
     "provenance": false