@pagamio/frontend-commons-lib 0.8.286 → 0.8.288

package/lib/components/ecommerce/BundleCard.d.ts

@@ -0,0 +1,11 @@
+import type { Bundle } from './types';
+export interface BundleCardProps {
+    bundle: Bundle;
+    onAdd: (bundle: Bundle) => void | Promise<void>;
+    disabled?: boolean;
+    isAdding?: boolean;
+    currency?: string;
+    /** "button" renders an explicit Add to Cart button. "tap" makes the whole card tappable (POS style). */
+    interaction?: 'button' | 'tap';
+}
+export declare function BundleCard({ bundle, onAdd, disabled, isAdding, currency, interaction, }: BundleCardProps): import("react/jsx-runtime").JSX.Element;

package/lib/components/ecommerce/BundleCard.js

@@ -0,0 +1,40 @@
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { HiOutlineGift, HiOutlineShoppingCart } from 'react-icons/hi';
+import { cn } from '../../helpers/utils';
+import { formatPrice } from '../../helpers/utils';
+import ImageComponent from '../ui/ImageComponent';
+function computeSavings(bundle) {
+    if (!bundle.items?.length)
+        return { regularTotal: bundle.bundlePrice, savings: 0, savingsPercent: 0 };
+    const regularTotal = bundle.items.reduce((sum, item) => {
+        const price = Number(item.product?.basePrice ?? 0);
+        return sum + price * item.quantity;
+    }, 0);
+    const savings = regularTotal > bundle.bundlePrice ? regularTotal - bundle.bundlePrice : 0;
+    const savingsPercent = regularTotal > 0 ? Math.round((savings / regularTotal) * 100) : 0;
+    return { regularTotal, savings, savingsPercent };
+}
+export function BundleCard({ bundle, onAdd, disabled = false, isAdding = false, currency = 'ZAR', interaction = 'button', }) {
+    const { regularTotal, savings, savingsPercent } = computeSavings(bundle);
+    const hasSavings = savings > 0;
+    const isDisabled = !bundle.isActive || disabled || isAdding;
+    const isTapMode = interaction === 'tap';
+    const handleAdd = () => {
+        if (!isDisabled)
+            onAdd(bundle);
+    };
+    const visibleItems = (bundle.items ?? []).slice(0, 3);
+    const remainingCount = Math.max(0, (bundle.items?.length ?? 0) - 3);
+    return (_jsxs("div", { onClick: isTapMode && !isDisabled ? handleAdd : undefined, onKeyDown: isTapMode && !isDisabled
+            ? (e) => {
+                if (e.key === 'Enter' || e.key === ' ')
+                    handleAdd();
+            }
+            : undefined, role: isTapMode ? 'button' : undefined, tabIndex: isTapMode && !isDisabled ? 0 : undefined, "aria-label": isTapMode ? `Add ${bundle.name} bundle to cart` : undefined, className: cn('group relative flex flex-col overflow-hidden rounded-lg bg-background transition-shadow duration-200 sm:rounded-xl', 'border border-border shadow-sm hover:shadow-lg', isDisabled && 'cursor-not-allowed opacity-60', isTapMode && !isDisabled && 'cursor-pointer'), children: [bundle.isActive && hasSavings && (_jsxs("div", { className: "absolute left-2 top-2 z-10 rounded-full bg-success 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: ["Save ", savingsPercent, "%"] })), bundle.isActive && !hasSavings && (_jsx("div", { className: "absolute left-2 top-2 z-10 rounded-full bg-success 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: "Bundle" })), _jsxs("div", { className: "relative aspect-square w-full overflow-hidden bg-muted", children: [bundle.imageUrl ? (_jsx(ImageComponent, { src: bundle.imageUrl, alt: bundle.name, fill: true, className: "object-cover", sizes: "(max-width: 640px) 50vw, (max-width: 1024px) 33vw, 20vw" })) : (_jsx("div", { className: "flex h-full w-full items-center justify-center bg-gradient-to-br from-success/10 to-success/5 text-success/40", children: _jsx(HiOutlineGift, { className: "h-10 w-10 sm:h-12 sm:w-12" }) })), !bundle.isActive && (_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", children: "Unavailable" }) }))] }), _jsxs("div", { className: "flex flex-1 flex-col p-2 sm:p-4", children: [_jsx("h3", { className: "line-clamp-2 text-xs font-medium leading-snug text-foreground sm:text-sm", children: bundle.name }), visibleItems.length > 0 && (_jsxs("div", { className: "mt-1.5 space-y-0.5", children: [_jsx("p", { className: "text-[10px] font-semibold uppercase tracking-wide text-muted-foreground", children: "Includes:" }), visibleItems.map((item, idx) => (_jsxs("p", { className: "line-clamp-1 text-[11px] text-muted-foreground", children: [item.quantity > 1 ? `${item.quantity}× ` : '', item.product?.name ?? 'Item', item.variant?.name ? ` (${item.variant.name})` : ''] }, item.id || idx))), remainingCount > 0 && _jsxs("p", { className: "text-[11px] font-medium text-primary", children: ["+", remainingCount, " more"] })] })), _jsx("div", { className: "flex-1" }), _jsxs("div", { className: "mt-1.5 sm:mt-3", children: [_jsxs("div", { className: "flex items-baseline gap-2", children: [_jsx("span", { className: "text-sm font-bold text-foreground sm:text-base", children: formatPrice(Number(bundle.bundlePrice) || 0, currency) }), hasSavings && (_jsx("span", { className: "text-[11px] text-muted-foreground line-through", children: formatPrice(regularTotal, currency) }))] }), hasSavings && (_jsxs("p", { className: "mt-0.5 text-[11px] font-medium text-success-text", children: ["Save ", formatPrice(savings, currency)] }))] }), interaction === 'button' && (_jsx("button", { type: "button", disabled: isDisabled, onClick: (e) => {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            handleAdd();
+                        }, 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', !isDisabled
+                            ? 'bg-foreground text-background hover:bg-foreground/90'
+                            : 'cursor-not-allowed bg-muted text-muted-foreground'), children: isAdding ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "h-3.5 w-3.5 animate-spin rounded-full border-2 border-background/30 border-t-background" }), _jsx("span", { children: "Adding..." })] })) : (_jsxs(_Fragment, { children: [_jsx(HiOutlineShoppingCart, { className: "h-3.5 w-3.5" }), _jsx("span", { children: "Add Bundle" })] })) }))] })] }));
+}

package/lib/components/ecommerce/CartItemCard.d.ts

@@ -0,0 +1,11 @@
+import type { EcommerceCartItem } from './types';
+export interface CartItemCardProps {
+    item: EcommerceCartItem;
+    onUpdateQuantity: (itemId: string, quantity: number) => void;
+    onRemove: (itemId: string) => void;
+    isUpdating?: boolean;
+    isRemoving?: boolean;
+    compact?: boolean;
+    currency?: string;
+}
+export declare function CartItemCard({ item, onUpdateQuantity, onRemove, isUpdating, isRemoving, compact, currency, }: CartItemCardProps): import("react/jsx-runtime").JSX.Element;

package/lib/components/ecommerce/CartItemCard.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { HiMinus, HiOutlineGift, HiOutlinePhotograph, HiPlus, HiTrash } from 'react-icons/hi';
+import { cn } from '../../helpers/utils';
+import { formatPrice } from '../../helpers/utils';
+export function CartItemCard({ item, onUpdateQuantity, onRemove, isUpdating, isRemoving, compact = false, currency = 'ZAR', }) {
+    const isLoading = isUpdating || isRemoving;
+    const imageUrl = item.productImageUrl;
+    const isBundle = !!item.metadata?.bundleId;
+    const bundleItems = item.metadata?.bundleItems;
+    return (_jsxs("div", { className: cn('flex gap-3 border-b border-border py-3 last:border-0 sm:py-4', isLoading && 'pointer-events-none opacity-50', compact ? 'gap-2 sm:gap-3' : 'gap-3 sm:gap-4'), children: [_jsx("div", { className: cn('relative flex-shrink-0 overflow-hidden rounded-lg bg-muted', compact ? 'h-14 w-14 sm:h-16 sm:w-16' : 'h-16 w-16 sm:h-20 sm:w-20'), children: imageUrl ? (_jsx("img", { src: imageUrl, alt: item.productName, className: "h-full w-full object-cover" })) : (_jsx("div", { className: "flex h-full w-full items-center justify-center text-muted-foreground", children: _jsx(HiOutlinePhotograph, { className: cn(compact ? 'h-6 w-6' : 'h-8 w-8') }) })) }), _jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [_jsxs("div", { className: "flex items-start justify-between gap-2", children: [_jsxs("div", { className: "min-w-0", children: [_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsxs("h4", { className: cn('font-medium text-foreground', compact ? 'line-clamp-1 text-xs sm:text-sm' : 'line-clamp-2 text-sm sm:text-base'), children: [item.productName, item.variantName && (_jsxs("span", { className: "ml-1 text-xs font-normal text-muted-foreground", children: ["\u2014 ", item.variantName] }))] }), isBundle && (_jsxs("span", { className: "inline-flex items-center gap-0.5 rounded-full bg-primary/10 px-1.5 py-0.5 text-[10px] font-semibold text-primary", children: [_jsx(HiOutlineGift, { className: "h-3 w-3" }), "Bundle"] }))] }), item.productSku && (_jsxs("p", { className: "mt-0.5 hidden text-xs text-muted-foreground sm:block", children: ["SKU: ", item.productSku] })), isBundle && bundleItems && bundleItems.length > 0 && (_jsx("div", { className: "mt-1 space-y-0.5", children: bundleItems.map((bi) => (_jsxs("p", { className: "text-[10px] text-muted-foreground", children: [bi.quantity, "x ", bi.productName, bi.variantName ? ` (${bi.variantName})` : ''] }, `${bi.productId}-${bi.variantName ?? ''}`))) }))] }), _jsx("button", { type: "button", onClick: () => onRemove(item.id), disabled: isLoading, className: "flex-shrink-0 rounded p-1 text-muted-foreground transition-colors hover:bg-accent hover:text-destructive disabled:opacity-50", children: _jsx(HiTrash, { className: cn(compact ? 'h-4 w-4' : 'h-5 w-5') }) })] }), _jsxs("div", { className: "mt-auto flex items-end justify-between pt-2", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("div", { className: cn('flex items-center gap-1 rounded-full bg-muted', compact ? 'p-0.5' : 'p-1'), children: [_jsx("button", { type: "button", onClick: () => onUpdateQuantity(item.id, item.quantity - 1), disabled: isLoading || item.quantity <= 1, className: cn('flex items-center justify-center rounded-full bg-background shadow-sm transition-colors hover:bg-accent disabled:cursor-not-allowed disabled:opacity-50', compact ? 'h-6 w-6' : 'h-8 w-8 sm:h-7 sm:w-7'), children: _jsx(HiMinus, { className: "h-3 w-3 text-muted-foreground" }) }), _jsx("span", { className: cn('text-center font-bold text-foreground', compact ? 'w-6 text-xs' : 'w-8 text-sm'), children: item.quantity }), _jsx("button", { type: "button", onClick: () => onUpdateQuantity(item.id, item.quantity + 1), disabled: isLoading, className: cn('flex items-center justify-center rounded-full bg-background shadow-sm transition-colors hover:bg-accent disabled:cursor-not-allowed disabled:opacity-50', compact ? 'h-6 w-6' : 'h-8 w-8 sm:h-7 sm:w-7'), children: _jsx(HiPlus, { className: "h-3 w-3 text-muted-foreground" }) })] }), _jsxs("span", { className: "text-xs text-muted-foreground", children: ["@ ", formatPrice(item.unitPrice, currency)] })] }), _jsxs("div", { className: "text-right", children: [_jsx("span", { className: cn('font-semibold text-foreground', compact ? 'text-xs sm:text-sm' : 'text-sm sm:text-base'), children: formatPrice(item.lineTotal, currency) }), item.taxAmount > 0 && (_jsxs("p", { className: "text-[10px] text-muted-foreground", children: ["incl. ", formatPrice(item.taxAmount, currency), " VAT"] }))] })] })] })] }));
+}

package/lib/components/ecommerce/CheckoutStepper.d.ts

@@ -0,0 +1,10 @@
+export interface CheckoutStep {
+    id: string;
+    name: string;
+}
+export interface CheckoutStepperProps {
+    steps: CheckoutStep[];
+    currentStep: number;
+    onStepClick?: (stepIndex: number) => void;
+}
+export declare function CheckoutStepper({ steps, currentStep, onStepClick }: CheckoutStepperProps): import("react/jsx-runtime").JSX.Element;

package/lib/components/ecommerce/CheckoutStepper.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { HiCheck } from 'react-icons/hi';
+import { cn } from '../../helpers/utils';
+export function CheckoutStepper({ steps, currentStep, onStepClick }) {
+    return (_jsx("nav", { "aria-label": "Checkout progress", className: "w-full", children: _jsx("ol", { className: "flex items-center justify-between", children: steps.map((step, stepIndex) => {
+                const isCompleted = stepIndex < currentStep;
+                const isCurrent = stepIndex === currentStep;
+                const isClickable = !!onStepClick && stepIndex < currentStep;
+                const isLast = stepIndex === steps.length - 1;
+                return (_jsxs("li", { className: cn('relative flex flex-1 items-center', isLast && 'flex-none'), children: [_jsxs("div", { className: "flex flex-col items-center", children: [_jsx("button", { type: "button", onClick: () => isClickable && onStepClick?.(stepIndex), disabled: !isClickable, className: cn('relative z-10 flex h-10 w-10 items-center justify-center rounded-full text-sm font-semibold transition-all duration-200', isCompleted && 'bg-foreground text-white', isCurrent && 'border-2 border-foreground bg-background text-foreground', !isCompleted && !isCurrent && 'border-2 border-input bg-background text-muted-foreground', isClickable && 'cursor-pointer hover:bg-foreground/90', !isClickable && 'cursor-default'), "aria-current": isCurrent ? 'step' : undefined, "aria-label": `${isCompleted ? 'Completed: ' : isCurrent ? 'Current: ' : ''}${step.name}`, children: isCompleted ? _jsx(HiCheck, { className: "h-5 w-5", "aria-hidden": "true" }) : _jsx("span", { children: stepIndex + 1 }) }), _jsx("span", { className: cn('mt-3 text-xs font-medium sm:text-sm', isCompleted && 'text-foreground', isCurrent && 'font-semibold text-foreground', !isCompleted && !isCurrent && 'text-muted-foreground'), children: step.name })] }), !isLast && (_jsxs("div", { className: "relative mx-2 h-0.5 flex-1 sm:mx-4", "aria-hidden": "true", children: [_jsx("div", { className: "absolute inset-0 bg-muted" }), _jsx("div", { className: cn('absolute inset-y-0 left-0 bg-foreground transition-all duration-300', isCompleted ? 'w-full' : 'w-0') })] }))] }, step.id));
+            }) }) }));
+}

package/lib/components/ecommerce/FloatingCartButton.d.ts

@@ -0,0 +1,8 @@
+export interface FloatingCartButtonProps {
+    itemCount: number;
+    totalAmount: number;
+    onClick: () => void;
+    isVisible: boolean;
+    currency?: string;
+}
+export declare function FloatingCartButton({ itemCount, totalAmount, onClick, isVisible, currency, }: FloatingCartButtonProps): import("react/jsx-runtime").JSX.Element | null;

package/lib/components/ecommerce/FloatingCartButton.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { HiShoppingCart } from 'react-icons/hi';
+import { formatPrice } from '../../helpers/utils';
+export function FloatingCartButton({ itemCount, totalAmount, onClick, isVisible, currency = 'ZAR', }) {
+    if (!isVisible)
+        return null;
+    return (_jsxs("button", { type: "button", onClick: onClick, "aria-label": `Shopping cart with ${itemCount} items, total ${formatPrice(totalAmount, currency)}`, className: "fixed bottom-4 left-1/2 z-30 flex -translate-x-1/2 items-center gap-2.5 rounded-full bg-foreground px-5 py-3 text-background shadow-xl transition-all hover:shadow-2xl active:scale-95 sm:left-auto sm:right-6 sm:bottom-6 sm:translate-x-0", children: [_jsx(HiShoppingCart, { className: "h-4 w-4" }), _jsx("span", { className: "text-sm font-bold", children: formatPrice(totalAmount, currency) }), _jsx("span", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-background text-[10px] font-bold text-foreground", children: itemCount })] }));
+}

package/lib/components/ecommerce/OrderSummary.d.ts

@@ -0,0 +1,23 @@
+import type { EcommerceCartItem } from './types';
+export interface OrderSummaryProps {
+    items?: EcommerceCartItem[];
+    subtotal: number;
+    taxAmount: number;
+    totalAmount: number;
+    discountAmount?: number;
+    showItems?: boolean;
+    showCheckoutButton?: boolean;
+    onCheckout?: () => void;
+    isLoading?: boolean;
+    checkoutButtonText?: string;
+    priceDisplayMode?: 'inclusive' | 'exclusive';
+    currency?: string;
+    securityText?: string;
+}
+export declare function OrderSummary({ items, subtotal, taxAmount, totalAmount, discountAmount, showItems, showCheckoutButton, onCheckout, isLoading, checkoutButtonText, priceDisplayMode, currency, securityText, }: OrderSummaryProps): import("react/jsx-runtime").JSX.Element;
+export interface OrderSummaryCompactProps {
+    itemCount: number;
+    totalAmount: number;
+    currency?: string;
+}
+export declare function OrderSummaryCompact({ itemCount, totalAmount, currency }: OrderSummaryCompactProps): import("react/jsx-runtime").JSX.Element;

package/lib/components/ecommerce/OrderSummary.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { HiOutlineLockClosed } from 'react-icons/hi';
+import { formatPrice } from '../../helpers/utils';
+export function OrderSummary({ items = [], subtotal, taxAmount, totalAmount, discountAmount = 0, showItems = false, showCheckoutButton = false, onCheckout, isLoading, checkoutButtonText = 'Proceed to Checkout', priceDisplayMode = 'exclusive', currency = 'ZAR', securityText, }) {
+    return (_jsxs("div", { className: "rounded-xl border border-border bg-background p-3 sm:p-5", children: [_jsx("h3", { className: "mb-2 text-sm font-bold text-foreground sm:mb-3 sm:text-base", children: "Order Summary" }), showItems && items.length > 0 && (_jsx("div", { className: "mb-4 max-h-[300px] space-y-3 overflow-y-auto border-b border-border pb-4", children: items.map((item) => (_jsxs("div", { className: "flex items-center justify-between text-sm", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("span", { className: "text-muted-foreground", children: [item.quantity, "x"] }), _jsx("div", { className: "min-w-0", children: _jsxs("span", { className: "line-clamp-1 text-foreground", children: [item.productName, item.variantName && (_jsxs("span", { className: "ml-1 text-xs text-muted-foreground", children: ["\u2014 ", item.variantName] }))] }) })] }), _jsxs("div", { className: "text-right", children: [_jsx("span", { className: "font-medium text-foreground", children: formatPrice(item.lineTotal, currency) }), item.taxAmount > 0 && (_jsxs("p", { className: "text-[10px] text-muted-foreground", children: ["incl. ", formatPrice(item.taxAmount, currency), " VAT"] }))] })] }, item.id))) })), _jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "flex items-center justify-between text-sm", children: [_jsxs("span", { className: "text-muted-foreground", children: ["Subtotal ", _jsx("span", { className: "text-xs", children: "(excl. VAT)" })] }), _jsx("span", { className: "font-medium text-foreground", children: formatPrice(subtotal, currency) })] }), _jsxs("div", { className: "flex items-center justify-between text-sm", children: [_jsxs("span", { className: "text-muted-foreground", children: ["VAT ", _jsxs("span", { className: "text-xs", children: ["(", priceDisplayMode === 'inclusive' ? 'included' : 'added', ")"] })] }), _jsx("span", { className: "font-medium text-foreground", children: formatPrice(taxAmount, currency) })] }), discountAmount > 0 && (_jsxs("div", { className: "flex items-center justify-between text-sm text-success", children: [_jsx("span", { children: "Discount" }), _jsxs("span", { className: "font-medium", children: ["-", formatPrice(discountAmount, currency)] })] })), _jsx("div", { className: "border-t border-border pt-3", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-lg font-semibold text-foreground", children: "Total" }), _jsx("span", { className: "text-lg font-bold text-foreground sm:text-xl", children: formatPrice(totalAmount, currency) })] }) })] }), showCheckoutButton && (_jsxs("div", { className: "mt-6 space-y-3", children: [_jsx("button", { type: "button", className: "flex h-11 w-full items-center justify-center rounded-lg bg-foreground text-sm font-semibold text-background transition-colors hover:bg-foreground/90 disabled:cursor-not-allowed disabled:opacity-50", onClick: onCheckout, disabled: isLoading || items.length === 0, children: isLoading ? ('Processing...') : (_jsxs(_Fragment, { children: [_jsx(HiOutlineLockClosed, { className: "mr-2 h-4 w-4" }), checkoutButtonText] })) }), securityText && _jsx("p", { className: "text-center text-xs text-muted-foreground", children: securityText })] }))] }));
+}
+export function OrderSummaryCompact({ itemCount, totalAmount, currency = 'ZAR' }) {
+    return (_jsxs("div", { className: "flex items-center justify-between rounded-lg bg-muted px-4 py-3", children: [_jsx("div", { children: _jsxs("span", { className: "text-sm text-muted-foreground", children: [itemCount, " item", itemCount !== 1 ? 's' : ''] }) }), _jsx("div", { className: "text-right", children: _jsx("span", { className: "text-lg font-bold text-foreground", children: formatPrice(totalAmount, currency) }) })] }));
+}

package/lib/components/ecommerce/ProductCard.d.ts

@@ -0,0 +1,21 @@
+import type { EcommerceProduct } from './types';
+export interface ProductCardProps {
+    product: EcommerceProduct;
+    onAddToCart?: (product: EcommerceProduct) => void;
+    isAddingToCart?: boolean;
+    storeId?: string;
+    basePath?: string;
+    featured?: boolean;
+    linkSuffix?: string;
+    currency?: string;
+    /** Render function for the product link wrapper */
+    renderLink?: (props: {
+        to: string;
+        children: React.ReactNode;
+        className?: string;
+        tabIndex?: number;
+        'aria-label'?: string;
+    }) => React.ReactNode;
+    onNavigate?: (productUrl: string) => void;
+}
+export declare function ProductCard({ product, onAddToCart, isAddingToCart, storeId, basePath, featured, linkSuffix, currency, renderLink, onNavigate, }: ProductCardProps): import("react/jsx-runtime").JSX.Element;

package/lib/components/ecommerce/ProductCard.js

@@ -0,0 +1,62 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { HiOutlineShoppingCart, HiOutlineViewGrid } from 'react-icons/hi';
+import { cn } from '../../helpers/utils';
+import { formatPrice } from '../../helpers/utils';
+import ImageComponent from '../ui/ImageComponent';
+const LOW_STOCK_THRESHOLD = 5;
+export function ProductCard({ product, onAddToCart, isAddingToCart, storeId, basePath = '/shop', featured = false, linkSuffix, currency = 'ZAR', renderLink, onNavigate, }) {
+    const hasStock = product.totalStock > 0;
+    const isLowStock = hasStock && product.totalStock <= LOW_STOCK_THRESHOLD;
+    const isBackorderable = product.allowBackorders === true;
+    const canAddToCart = (hasStock || isBackorderable) && !!storeId;
+    const hasVariants = product.variants && product.variants.length > 0;
+    const priceDisplay = (() => {
+        if (!hasVariants) {
+            return formatPrice(product.displayPrice ?? product.basePrice, currency);
+        }
+        const prices = product.variants.map((v) => v.displayPrice ?? v.basePrice);
+        const basePrice = product.displayPrice ?? product.basePrice;
+        const allPrices = [basePrice, ...prices];
+        const min = Math.min(...allPrices);
+        const max = Math.max(...allPrices);
+        if (min === max)
+            return formatPrice(min, currency);
+        return `${formatPrice(min, currency)} – ${formatPrice(max, currency)}`;
+    })();
+    const productUrl = `${basePath}/${product.id}${linkSuffix ?? ''}`;
+    const LinkWrapper = ({ children, className, tabIndex, ariaLabel, }) => {
+        if (renderLink) {
+            return (_jsx(_Fragment, { children: renderLink({
+                    to: productUrl,
+                    children,
+                    className,
+                    tabIndex,
+                    'aria-label': ariaLabel,
+                }) }));
+        }
+        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) => {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            if (hasVariants) {
+                                if (onNavigate) {
+                                    onNavigate(productUrl);
+                                }
+                                else {
+                                    window.location.href = productUrl;
+                                }
+                            }
+                            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
+                            ? hasStock || isBackorderable
+                                ? 'bg-foreground text-background hover:bg-foreground/90 active:bg-foreground/80'
+                                : 'cursor-not-allowed bg-muted text-muted-foreground'
+                            : canAddToCart && !isAddingToCart
+                                ? isBackorderable && !hasStock
+                                    ? 'bg-warning text-white hover:bg-warning/90'
+                                    : 'bg-foreground text-background hover:bg-foreground/90 active:bg-foreground/80'
+                                : 'cursor-not-allowed bg-muted text-muted-foreground'), children: hasVariants ? (_jsxs(_Fragment, { children: [_jsx(HiOutlineViewGrid, { className: "h-3.5 w-3.5" }), _jsx("span", { children: !hasStock && !isBackorderable ? 'Out of Stock' : 'Options' })] })) : isAddingToCart ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "h-3.5 w-3.5 animate-spin rounded-full border-2 border-background/30 border-t-background" }), _jsx("span", { children: "Adding..." })] })) : (_jsxs(_Fragment, { children: [_jsx(HiOutlineShoppingCart, { className: "h-3.5 w-3.5" }), _jsx("span", { children: !storeId ? 'Select Store' : hasStock ? 'Add to Cart' : isBackorderable ? 'Backorder' : 'Sold Out' })] })) })] })] }));
+}

package/lib/components/ecommerce/ProductCardSkeleton.d.ts

@@ -0,0 +1 @@
+export declare function ProductCardSkeleton(): import("react/jsx-runtime").JSX.Element;

package/lib/components/ecommerce/ProductCardSkeleton.js

@@ -0,0 +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" })] })] }));
+}

package/lib/components/ecommerce/ProductGrid.d.ts

@@ -0,0 +1,17 @@
+import { ProductCard } from './ProductCard';
+import type { EcommerceProduct } from './types';
+export interface ProductGridProps {
+    products: EcommerceProduct[];
+    isLoading?: boolean;
+    onAddToCart?: (product: EcommerceProduct) => void;
+    addingProductId?: string;
+    storeId?: string;
+    emptyMessage?: string;
+    basePath?: string;
+    linkSuffix?: string;
+    skeletonCount?: number;
+    currency?: string;
+    renderLink?: React.ComponentProps<typeof ProductCard>['renderLink'];
+    onNavigate?: (url: string) => void;
+}
+export declare function ProductGrid({ products, isLoading, onAddToCart, addingProductId, storeId, emptyMessage, basePath, linkSuffix, skeletonCount, currency, renderLink, onNavigate, }: ProductGridProps): import("react/jsx-runtime").JSX.Element;

package/lib/components/ecommerce/ProductGrid.js

@@ -0,0 +1,14 @@
+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';
+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))) }));
+    }
+    if (products.length === 0) {
+        return (_jsx("div", { className: "flex min-h-[200px] items-center justify-center sm:min-h-[300px]", children: _jsx(EmptyState, { title: emptyMessage }) }));
+    }
+    return (_jsx("div", { className: GRID_CLASSES, children: products.map((product) => (_jsx(ProductCard, { product: product, onAddToCart: onAddToCart, isAddingToCart: addingProductId === product.id, storeId: storeId, basePath: basePath, linkSuffix: linkSuffix, currency: currency, renderLink: renderLink, onNavigate: onNavigate }, product.id))) }));
+}

package/lib/components/ecommerce/index.d.ts

@@ -0,0 +1,16 @@
+export { ProductCard } from './ProductCard';
+export type { ProductCardProps } from './ProductCard';
+export { ProductCardSkeleton } from './ProductCardSkeleton';
+export { ProductGrid } from './ProductGrid';
+export type { ProductGridProps } from './ProductGrid';
+export { CartItemCard } from './CartItemCard';
+export type { CartItemCardProps } from './CartItemCard';
+export { OrderSummary, OrderSummaryCompact } from './OrderSummary';
+export type { OrderSummaryProps, OrderSummaryCompactProps } from './OrderSummary';
+export { FloatingCartButton } from './FloatingCartButton';
+export type { FloatingCartButtonProps } from './FloatingCartButton';
+export { CheckoutStepper } from './CheckoutStepper';
+export type { CheckoutStepperProps, CheckoutStep } from './CheckoutStepper';
+export { BundleCard } from './BundleCard';
+export type { BundleCardProps } from './BundleCard';
+export type { EcommerceCategory, EcommerceProduct, ProductVariant, EcommerceCartItem, CartItemBundleItem, CartItemMetadata, Bundle, BundleItem, } from './types';

package/lib/components/ecommerce/index.js

@@ -0,0 +1,9 @@
+// Ecommerce Components
+export { ProductCard } from './ProductCard';
+export { ProductCardSkeleton } from './ProductCardSkeleton';
+export { ProductGrid } from './ProductGrid';
+export { CartItemCard } from './CartItemCard';
+export { OrderSummary, OrderSummaryCompact } from './OrderSummary';
+export { FloatingCartButton } from './FloatingCartButton';
+export { CheckoutStepper } from './CheckoutStepper';
+export { BundleCard } from './BundleCard';

package/lib/components/ecommerce/types.d.ts

@@ -0,0 +1,113 @@
+/**
+ * Ecommerce Types
+ *
+ * Shared type definitions for ecommerce UI components.
+ */
+export interface EcommerceCategory {
+    id: string;
+    name: string;
+    description?: string;
+    imageUrl?: string;
+}
+export interface ProductVariant {
+    id: string;
+    name: string;
+    sku?: string | null;
+    basePrice: number;
+    displayPrice?: number;
+    taxRate?: number;
+    imageUrl?: string;
+    attributes?: Record<string, string>;
+    quantityAvailable?: number;
+}
+export interface EcommerceProduct {
+    id: string;
+    name: string;
+    sku: string;
+    description?: string;
+    basePrice: number;
+    displayPrice?: number;
+    imageUrl?: string;
+    category?: EcommerceCategory;
+    availableStores: number;
+    totalStock: number;
+    inStock?: boolean;
+    allowBackorders?: boolean;
+    variants?: ProductVariant[];
+}
+export interface CartItemBundleItem {
+    productId: string;
+    productName: string;
+    variantName?: string;
+    quantity: number;
+    unitPrice: number;
+}
+export interface CartItemMetadata {
+    bundleId?: string;
+    bundleName?: string;
+    bundleItems?: CartItemBundleItem[];
+    [key: string]: unknown;
+}
+export interface EcommerceCartItem {
+    id: string;
+    cartId: string;
+    productId: string;
+    variantId?: string;
+    variantName?: string;
+    productName: string;
+    productSku?: string;
+    productImageUrl?: string;
+    quantity: number;
+    unitPrice: number;
+    subtotal: number;
+    taxAmount: number;
+    discountAmount: number;
+    totalAmount: number;
+    lineTotal: number;
+    metadata?: CartItemMetadata | null;
+}
+export interface BundleItem {
+    id: string;
+    bundleId: string;
+    productId: string;
+    variantId?: string | null;
+    quantity: number;
+    sortOrder?: number;
+    createdAt?: string;
+    updatedAt?: string;
+    product?: {
+        id: string;
+        name: string;
+        sku?: string;
+        basePrice?: number | null;
+        displayPrice?: number | null;
+        imageUrl?: string;
+        variants?: Array<{
+            id: string;
+            name: string;
+            sku?: string | null;
+            basePrice?: number | null;
+        }>;
+    };
+    variant?: {
+        id: string;
+        name: string;
+        sku?: string;
+        basePrice?: number;
+    } | null;
+}
+export interface Bundle {
+    id: string;
+    organizationId: string;
+    sku?: string;
+    name: string;
+    description?: string | null;
+    bundlePrice: number;
+    imageUrl?: string | null;
+    contextType?: string | null;
+    contextId?: string | null;
+    isActive: boolean;
+    createdAt?: string;
+    updatedAt?: string;
+    items?: BundleItem[];
+}

package/lib/components/ecommerce/types.js

@@ -0,0 +1,6 @@
+/**
+ * Ecommerce Types
+ *
+ * Shared type definitions for ecommerce UI components.
+ */
+export {};

package/lib/components/index.d.ts

@@ -1,3 +1,4 @@
+export * from './ecommerce';
 export * from './icons';
 export * from './layout';
 export * from './ui';

package/lib/components/index.js

@@ -1,3 +1,4 @@
+export * from './ecommerce';
 export * from './icons';
 export * from './layout';
 export * from './ui';

package/lib/components/layout/Navbar.d.ts

@@ -59,6 +59,24 @@ interface AppDashboardNavbarProps extends AppUserDropdownProps {
      * Custom locale names to display in the locale switcher
      */
     localeNames?: Record<string, string>;
+    /**
+     * Custom render function for the user dropdown area.
+     * When provided, replaces the default AppUserDropdown entirely.
+     * Use this for guest auth states, custom login/register buttons, etc.
+     */
+    renderUserDropdown?: () => React.ReactNode;
+    /**
+     * User info to display in the default user dropdown.
+     * Only used when renderUserDropdown is NOT provided.
+     */
+    userInfo?: {
+        name?: string;
+        email?: string;
+    };
+    /**
+     * Custom inline styles applied to the root navbar element.
+     */
+    style?: React.CSSProperties;
     /**
      * Configuration for the environment banner
      */

package/lib/components/layout/Navbar.js

@@ -10,7 +10,7 @@ import { LocaleSwitcher, useLibTranslations, useTranslation } from '../../transl
 import Button from '../ui/Button';
 const AppSidebarToggleButton = React.memo(({ isMobileOpen, onToggle }) => {
     const { tLib } = useLibTranslations();
-    return (_jsxs(Button, { type: "button", variant: "ghost", onClick: onToggle, className: "mr-3 cursor-pointer rounded p-2 text-foreground/70 hover:bg-accent hover:text-foreground", children: [_jsx("span", { className: "sr-only", children: tLib('sidebar.toggle', 'Toggle sidebar') }), _jsx("div", { className: "md:hidden", children: isMobileOpen ? _jsx(HiX, { className: "h-6 w-6" }) : _jsx(HiMenuAlt1, { className: "h-6 w-6" }) }), _jsx("div", { className: "hidden md:block", children: _jsx(HiMenuAlt1, { className: "h-6 w-6" }) })] }));
+    return (_jsxs(Button, { type: "button", variant: "ghost", onClick: onToggle, className: "mr-2 cursor-pointer rounded p-1.5 text-foreground/70 hover:bg-accent hover:text-foreground sm:mr-3 sm:p-2", children: [_jsx("span", { className: "sr-only", children: tLib('sidebar.toggle', 'Toggle sidebar') }), _jsx("div", { className: "md:hidden", children: isMobileOpen ? _jsx(HiX, { className: "h-5 w-5 sm:h-6 sm:w-6" }) : _jsx(HiMenuAlt1, { className: "h-5 w-5 sm:h-6 sm:w-6" }) }), _jsx("div", { className: "hidden md:block", children: _jsx(HiMenuAlt1, { className: "h-5 w-5 sm:h-6 sm:w-6" }) })] }));
 });
 const AppDarkThemeToggleWithTooltip = React.memo(() => {
     const { tLib } = useLibTranslations();
@@ -48,7 +48,7 @@ const EnvironmentBanner = ({ show = false, text, bgColor = 'red', color = 'black
                     letterSpacing: '0.1em',
                 }, children: text }) }) }));
 };
-const AppDashboardNavbar = ({ dashboardLink = '/dashboard', brandImage, linkComponent, showThemeToggler = true, appLabel, onSelectChangePassword, onSelectProfile, onLogout, hideSidebarToggle = false, navBarActionComponents = [], showLocaleSwitcher = false, localeNames, environmentBanner = { show: false, text: '' }, navbarBackground = { light: 'bg-purple', dark: '' }, navbarTextColors = { brand: 'text-white', general: 'text-white' }, }) => {
+const AppDashboardNavbar = ({ dashboardLink = '/dashboard', brandImage, linkComponent, showThemeToggler = true, appLabel, onSelectChangePassword, onSelectProfile, onLogout, hideSidebarToggle = false, navBarActionComponents = [], showLocaleSwitcher = false, localeNames, renderUserDropdown, userInfo, style, environmentBanner = { show: false, text: '' }, navbarBackground = { light: 'bg-purple', dark: '' }, navbarTextColors = { brand: 'text-white', general: 'text-white' }, }) => {
     const sidebar = useAppSidebarContext();
     const { isMd } = useMediaQueries();
     const { t } = useTranslation();
@@ -61,7 +61,7 @@ const AppDashboardNavbar = ({ dashboardLink = '/dashboard', brandImage, linkComp
         }
     }, [isMd, sidebar.desktop, sidebar.mobile]);
     const navbarClasses = `fixed top-0 w-full border-b border-border ${navbarBackground.light} p-0 ${navbarBackground.dark} sm:p-0`;
-    return (_jsxs(_Fragment, { children: [_jsx(Navbar, { fluid: true, className: navbarClasses, style: { zIndex: 100 }, children: _jsx("div", { className: "w-full p-3 pr-4", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center", children: [!hideSidebarToggle && (_jsx(AppSidebarToggleButton, { isMobileOpen: sidebar.mobile.isOpen, onToggle: handleToggleSidebar })), _jsxs(NavbarBrand, { as: linkComponent, href: dashboardLink, className: "mr-14", children: [brandImage && (_jsx("img", { src: brandImage.src, alt: t(brandImage.alt), width: brandImage.width, height: brandImage.height, className: "h-8" })), _jsx("p", { className: `font-bold ${navbarTextColors.brand} text-[15px] mb-0`, children: t(appLabel) })] })] }), _jsxs("div", { className: "flex items-center lg:gap-3", children: [navBarActionComponents.map((action) => (_jsx(React.Fragment, { children: action }, `app-nav-bar-component-${uuidv4()}`))), showThemeToggler && _jsx(AppDarkThemeToggleWithTooltip, {}), showLocaleSwitcher && (_jsx("div", { className: `mx-2 ${navbarTextColors.general}`, children: _jsx(LocaleSwitcher, { localeNames: localeNames, className: "min-w-[120px] text-sm text-white bg-background z-50" }) })), _jsx("div", { className: "flex items-center", children: _jsx(AppUserDropdown, { onLogout: onLogout, onSelectChangePassword: onSelectChangePassword, onSelectProfile: onSelectProfile, navbarTextColors: navbarTextColors }) })] })] }) }) }), _jsx(EnvironmentBanner, { ...environmentBanner })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Navbar, { fluid: true, className: navbarClasses, style: { zIndex: 100, ...style }, children: _jsx("div", { className: "w-full p-2 pr-3 sm:p-3 sm:pr-4", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center", children: [!hideSidebarToggle && (_jsx(AppSidebarToggleButton, { isMobileOpen: sidebar.mobile.isOpen, onToggle: handleToggleSidebar })), _jsxs(NavbarBrand, { as: linkComponent, href: dashboardLink, className: "mr-4 sm:mr-8 lg:mr-14", children: [brandImage && (_jsx("img", { src: brandImage.src, alt: t(brandImage.alt), width: brandImage.width, height: brandImage.height, className: "h-6 sm:h-8" })), _jsx("p", { className: `font-bold ${navbarTextColors.brand} text-xs sm:text-[15px] mb-0`, children: t(appLabel) })] })] }), _jsxs("div", { className: "flex items-center gap-1 sm:gap-2 lg:gap-3", children: [navBarActionComponents.map((action) => (_jsx(React.Fragment, { children: action }, `app-nav-bar-component-${uuidv4()}`))), showThemeToggler && _jsx(AppDarkThemeToggleWithTooltip, {}), showLocaleSwitcher && (_jsx("div", { className: `mx-2 ${navbarTextColors.general}`, children: _jsx(LocaleSwitcher, { localeNames: localeNames, className: "min-w-[120px] text-sm text-white bg-background z-50" }) })), _jsx("div", { className: "flex items-center", children: renderUserDropdown ? (renderUserDropdown()) : (_jsx(AppUserDropdown, { onLogout: onLogout, onSelectChangePassword: onSelectChangePassword, onSelectProfile: onSelectProfile, navbarTextColors: navbarTextColors })) })] })] }) }) }), _jsx(EnvironmentBanner, { ...environmentBanner })] }));
 };
 export default AppDashboardNavbar;
 export { AppSidebarToggleButton, AppDarkThemeToggleWithTooltip, AppUserDropdown, AppDashboardNavbar };

package/lib/components/layout/NavbarActionsDropdown.d.ts

@@ -0,0 +1,11 @@
+export declare const NavbarActionsDropdown: ({ children }: {
+    children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const NavbarActionItem: ({ icon: Icon, label, onClick, badge, }: {
+    icon: React.ComponentType<{
+        className?: string;
+    }>;
+    label: string;
+    onClick?: () => void;
+    badge?: number;
+}) => import("react/jsx-runtime").JSX.Element;

package/lib/components/layout/NavbarActionsDropdown.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { IconDots } from '@tabler/icons-react';
+import { useState } from 'react';
+import Button from '../ui/Button';
+import { Popover, PopoverContent, PopoverTrigger } from '../ui/Popover';
+export const NavbarActionsDropdown = ({ children }) => {
+    const [open, setOpen] = useState(false);
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "hidden md:flex md:items-center md:gap-2", children: children }), _jsx("div", { className: "flex md:hidden", children: _jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(Button, { variant: "outline", size: "sm", className: "h-9 w-9 border-border p-0 hover:bg-accent", "aria-label": "More actions", children: _jsx(IconDots, { className: "h-5 w-5" }) }) }), _jsx(PopoverContent, { className: "w-48 p-2", align: "end", children: _jsx("div", { className: "flex flex-col gap-1", children: children }) })] }) })] }));
+};
+export const NavbarActionItem = ({ icon: Icon, label, onClick, badge, }) => {
+    return (_jsxs(_Fragment, { children: [_jsxs(Button, { variant: "ghost", size: "icon", onClick: onClick, className: "relative hidden h-9 w-9 items-center justify-center rounded-md border border-border bg-background text-muted-foreground shadow-sm transition-colors hover:bg-accent hover:text-foreground md:flex", title: label, children: [_jsx(Icon, { className: "h-5 w-5 stroke-[1.5]" }), badge !== undefined && badge > 0 && (_jsx("span", { className: "absolute -right-1 -top-1 flex h-5 w-5 items-center justify-center rounded-full bg-destructive text-[10px] font-bold text-white", children: badge }))] }), _jsxs(Button, { variant: "ghost", onClick: onClick, className: "flex w-full items-center gap-3 rounded-md px-3 py-2 text-left text-sm transition-colors hover:bg-accent md:hidden", children: [_jsx(Icon, { className: "h-4 w-4 stroke-[1.5] text-muted-foreground" }), _jsx("span", { className: "flex-1 text-foreground", children: label }), badge !== undefined && badge > 0 && (_jsx("span", { className: "flex h-5 min-w-[20px] items-center justify-center rounded-full bg-destructive px-1.5 text-[10px] font-bold text-white", children: badge }))] })] }));
+};

package/lib/components/layout/index.d.ts

@@ -6,3 +6,4 @@ export { default as AppPageHeader, type AppPageHeaderProps } from './PageHeader'
 export { default as AppDashboardSidebar, AppDesktopSidebar, AppMobileSidebar, AppSidebarMenu } from './Sidebar';
 export { default as AppLayout, type AppLayoutProps } from './AppLayout';
 export { default as SessionExpiryModal, type SessionExpiryModalProps } from './SessionExpiryModal';
+export { NavbarActionsDropdown, NavbarActionItem } from './NavbarActionsDropdown';

package/lib/components/layout/index.js

@@ -6,3 +6,4 @@ export { default as AppPageHeader } from './PageHeader';
 export { default as AppDashboardSidebar, AppDesktopSidebar, AppMobileSidebar, AppSidebarMenu } from './Sidebar';
 export { default as AppLayout } from './AppLayout';
 export { default as SessionExpiryModal } from './SessionExpiryModal';
+export { NavbarActionsDropdown, NavbarActionItem } from './NavbarActionsDropdown';