storefront-layouts-staging 1.0.0-staging.0

package/dist/components/shipping/ShippingQuoteAddressForm.js

@@ -0,0 +1,66 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import { ChevronDown } from 'lucide-react';
+import { cn } from '../../lib/utils/index.js';
+import { countries, getCountryByName, getCitiesByCountry, getNigerianCitiesByState } from '../../lib/countries.js';
+import { isNigeria, deriveNigerianStateFromCity, NIGERIAN_STATES, enrichShippingQuoteAddress, } from '../../lib/shipping-address.util.js';
+export function ShippingQuoteAddressForm({ address, onChange, onToast, className, showPhone = false, }) {
+    const [isCountryOpen, setIsCountryOpen] = useState(false);
+    const [isCityOpen, setIsCityOpen] = useState(false);
+    const [isStateOpen, setIsStateOpen] = useState(false);
+    const enriched = enrichShippingQuoteAddress(address);
+    const nigeria = isNigeria(address.country);
+    const handleCountrySelect = (countryName) => {
+        onChange({ country: countryName, city: '', state: '' });
+        setIsCountryOpen(false);
+        setIsCityOpen(false);
+    };
+    const handleCitySelect = (city) => {
+        const derivedState = nigeria ? deriveNigerianStateFromCity(city) : undefined;
+        onChange({ city, state: derivedState || address.state || '' });
+        setIsCityOpen(false);
+    };
+    const [cityInput, setCityInput] = useState(address.city || '');
+    const handleCityInputChange = (val) => {
+        setCityInput(val);
+        onChange({ city: val });
+        setIsCityOpen(true);
+    };
+    const handleCityPick = (city) => {
+        setCityInput(city);
+        handleCitySelect(city);
+        setIsCityOpen(false);
+    };
+    // Keep cityInput in sync when address.city changes externally (e.g. country reset)
+    if (address.city !== cityInput && !isCityOpen) {
+        setCityInput(address.city || '');
+    }
+    const citySuggestions = (() => {
+        if (!address.country)
+            return [];
+        const term = cityInput.toLowerCase();
+        if (nigeria && address.state) {
+            return getNigerianCitiesByState(address.state).filter(c => c.toLowerCase().includes(term));
+        }
+        if (!nigeria) {
+            return getCitiesByCountry(address.country).filter(c => c.toLowerCase().includes(term));
+        }
+        return [];
+    })();
+    return (_jsxs("div", { className: cn('grid grid-cols-1 sm:grid-cols-2 gap-3', className), children: [_jsxs("div", { className: "sm:col-span-2", children: [_jsxs("label", { className: "text-xs font-medium text-gray-600 mb-1 block", children: ["Street address ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsx("input", { type: "text", placeholder: "e.g. 12 Adeola Odeku Street, Victoria Island", value: address.street || '', onChange: (e) => onChange({ street: e.target.value, address1: e.target.value }), className: "w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-900 focus:border-transparent" }), _jsx("p", { className: "text-[11px] text-gray-500 mt-1", children: "Enter your house/flat number and street name for accurate delivery rates." })] }), _jsxs("div", { children: [_jsx("label", { className: "text-xs font-medium text-gray-600 mb-1 block", children: "Country" }), _jsxs("div", { className: "relative", children: [_jsxs("button", { type: "button", onClick: () => setIsCountryOpen(!isCountryOpen), className: "w-full px-3 py-2 text-sm bg-white border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-900 flex items-center justify-between text-left", children: [_jsx("span", { className: "flex items-center gap-2", children: (() => {
+                                            const selected = getCountryByName(address.country);
+                                            return selected ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-base", children: selected.flag }), _jsx("span", { children: selected.name })] })) : (_jsx("span", { className: "text-gray-400", children: "Select country" }));
+                                        })() }), _jsx(ChevronDown, { className: cn('w-4 h-4 text-gray-400', isCountryOpen && 'rotate-180') })] }), isCountryOpen && (_jsxs(_Fragment, { children: [_jsx("div", { className: "fixed inset-0 z-10", onClick: () => setIsCountryOpen(false) }), _jsx("div", { className: "absolute z-20 w-full mt-1 bg-white border border-gray-300 rounded-lg shadow-xl max-h-64 overflow-y-auto", children: countries.map((country) => (_jsxs("button", { type: "button", onClick: () => handleCountrySelect(country.name), className: cn('w-full px-3 py-2 text-sm text-left flex items-center gap-2 hover:bg-gray-50', address.country === country.name && 'bg-gray-50 font-medium'), children: [_jsx("span", { className: "text-base", children: country.flag }), _jsx("span", { children: country.name })] }, country.code))) })] }))] })] }), nigeria && (_jsxs("div", { children: [_jsxs("label", { className: "text-xs font-medium text-gray-600 mb-1 block", children: ["State ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsxs("div", { className: "relative", children: [_jsxs("button", { type: "button", onClick: () => setIsStateOpen(!isStateOpen), className: "w-full px-3 py-2 text-sm bg-white border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-900 flex items-center justify-between text-left", children: [_jsx("span", { className: enriched.state ? 'text-gray-900' : 'text-gray-400', children: enriched.state || 'Select state' }), _jsx(ChevronDown, { className: cn('w-4 h-4 text-gray-400', isStateOpen && 'rotate-180') })] }), isStateOpen && (_jsxs(_Fragment, { children: [_jsx("div", { className: "fixed inset-0 z-10", onClick: () => setIsStateOpen(false) }), _jsx("div", { className: "absolute z-20 w-full mt-1 bg-white border border-gray-300 rounded-lg shadow-xl max-h-64 overflow-y-auto", children: NIGERIAN_STATES.map((state) => (_jsx("button", { type: "button", onClick: () => {
+                                                // Clear city when state changes so stale city isn't submitted
+                                                onChange({ state, city: '' });
+                                                setCityInput('');
+                                                setIsStateOpen(false);
+                                            }, className: cn('w-full px-3 py-2 text-sm text-left hover:bg-gray-50', address.state === state && 'bg-gray-50 font-medium'), children: state }, state))) })] }))] })] })), _jsxs("div", { className: nigeria ? '' : 'sm:col-span-1', children: [_jsxs("label", { className: "text-xs font-medium text-gray-600 mb-1 block", children: ["City ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsxs("div", { className: "relative", children: [_jsx("input", { type: "text", placeholder: nigeria && !address.state ? 'Select a state first' : 'e.g. Lagos, Lekki, Ikeja', disabled: nigeria && !address.state, value: cityInput, onChange: (e) => handleCityInputChange(e.target.value), onFocus: () => {
+                                    if (!address.country) {
+                                        onToast?.('Please select a country first', 'error');
+                                        return;
+                                    }
+                                    setIsCityOpen(true);
+                                }, onBlur: () => setTimeout(() => setIsCityOpen(false), 150), className: cn('w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-900 focus:border-transparent', nigeria && !address.state && 'opacity-50 cursor-not-allowed bg-gray-50') }), isCityOpen && citySuggestions.length > 0 && (_jsxs(_Fragment, { children: [_jsx("div", { className: "fixed inset-0 z-10", onClick: () => setIsCityOpen(false) }), _jsx("div", { className: "absolute z-20 w-full mt-1 bg-white border border-gray-300 rounded-lg shadow-xl max-h-48 overflow-y-auto", children: citySuggestions.map((city) => (_jsx("button", { type: "button", onMouseDown: (e) => e.preventDefault(), onClick: () => handleCityPick(city), className: cn('w-full px-3 py-2 text-sm text-left hover:bg-gray-50', address.city === city && 'bg-gray-50 font-medium'), children: city }, city))) })] }))] }), _jsx("p", { className: "text-[11px] text-gray-500 mt-1", children: "Type your city or town \u2014 you can enter any location not shown in suggestions." })] }), _jsxs("div", { children: [_jsx("label", { className: "text-xs font-medium text-gray-600 mb-1 block", children: "Zip/Postal code" }), _jsx("input", { type: "text", placeholder: "Optional", value: address.zipCode || '', onChange: (e) => onChange({ zipCode: e.target.value }), className: "w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-900 focus:border-transparent" })] }), showPhone && (_jsxs("div", { className: "sm:col-span-2", children: [_jsx("label", { className: "text-xs font-medium text-gray-600 mb-1 block", children: "Phone" }), _jsx("input", { type: "tel", placeholder: "+234...", value: address.phone || '', onChange: (e) => onChange({ phone: e.target.value }), className: "w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-900 focus:border-transparent" })] }))] }));
+}

package/dist/components/ui/address-selector.d.ts

@@ -0,0 +1,11 @@
+import { Address } from '../../lib/services/customer.service';
+interface AddressSelectorProps {
+    addresses: Address[];
+    selectedAddressId: string | null;
+    onSelect: (addressId: string | null) => void;
+    isLoading?: boolean;
+    isAuthenticated: boolean;
+}
+export declare function AddressSelector({ addresses, selectedAddressId, onSelect, isLoading, isAuthenticated, }: AddressSelectorProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=address-selector.d.ts.map

package/dist/components/ui/address-selector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"address-selector.d.ts","sourceRoot":"","sources":["../../../src/components/ui/address-selector.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,OAAO,EAAE,MAAM,iCAAiC,CAAC;AAI1D,UAAU,oBAAoB;IAC5B,SAAS,EAAE,OAAO,EAAE,CAAC;IACrB,iBAAiB,EAAE,MAAM,GAAG,IAAI,CAAC;IACjC,QAAQ,EAAE,CAAC,SAAS,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC7C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,eAAe,EAAE,OAAO,CAAC;CAC1B;AAED,wBAAgB,eAAe,CAAC,EAC9B,SAAS,EACT,iBAAiB,EACjB,QAAQ,EACR,SAAiB,EACjB,eAAe,GAChB,EAAE,oBAAoB,2CA4EtB"}

package/dist/components/ui/address-selector.js

@@ -0,0 +1,21 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MapPin, Check } from 'lucide-react';
+export function AddressSelector({ addresses, selectedAddressId, onSelect, isLoading = false, isAuthenticated, }) {
+    if (!isAuthenticated) {
+        return null;
+    }
+    const formatAddress = (address) => {
+        const parts = [
+            address.address1,
+            address.address2,
+            `${address.city}, ${address.state} ${address.zipCode}`,
+            address.country,
+        ].filter(Boolean);
+        return parts.join(', ');
+    };
+    if (isLoading) {
+        return (_jsx("div", { className: "mb-6 p-4 bg-gray-50 rounded-xl border border-gray-200", children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "w-5 h-5 border-2 border-gray-300 border-t-black rounded-full animate-spin" }), _jsx("span", { className: "text-sm font-medium text-gray-600", children: "Loading addresses..." })] }) }));
+    }
+    return (_jsxs("div", { className: "mb-6 space-y-3", children: [_jsx("label", { className: "text-sm font-bold text-gray-700 ml-1 block", children: "Select or Add Address" }), _jsxs("div", { className: "space-y-2", children: [addresses.length > 0 && (_jsxs("select", { value: selectedAddressId || '', onChange: (e) => onSelect(e.target.value || null), className: "w-full px-5 py-3.5 bg-white border-2 border-gray-100 rounded-xl focus:outline-none focus:ring-0 focus:border-black transition-all font-medium text-gray-900", children: [_jsx("option", { value: "", children: "Add new address" }), addresses.map((address) => (_jsxs("option", { value: address.id, children: [address.label ? `${address.label} - ` : '', formatAddress(address), address.isDefault ? ' (Default)' : ''] }, address.id)))] })), selectedAddressId && (_jsx("div", { className: "p-4 bg-green-50 border-2 border-green-200 rounded-xl", children: _jsxs("div", { className: "flex items-start gap-3", children: [_jsx(Check, { className: "w-5 h-5 text-green-600 mt-0.5 flex-shrink-0" }), _jsxs("div", { className: "flex-1", children: [_jsx("p", { className: "text-sm font-bold text-green-900 mb-1", children: addresses.find(a => a.id === selectedAddressId)?.label || 'Selected Address' }), _jsx("p", { className: "text-sm text-green-700", children: formatAddress(addresses.find(a => a.id === selectedAddressId)) })] })] }) })), addresses.length === 0 && (_jsx("div", { className: "p-4 bg-blue-50 border-2 border-blue-200 rounded-xl", children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx(MapPin, { className: "w-5 h-5 text-blue-600" }), _jsx("p", { className: "text-sm font-medium text-blue-900", children: "No saved addresses. Fill in the form below to add one." })] }) }))] })] }));
+}

package/dist/components/ui/alert-modal.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+export type AlertType = 'success' | 'error' | 'info' | 'warning';
+interface AlertOptions {
+    title?: string;
+    confirmText?: string;
+    cancelText?: string;
+    onConfirm?: () => void;
+    onCancel?: () => void;
+    showCancel?: boolean;
+}
+interface AlertModalContextType {
+    showAlert: (message: string, type?: AlertType, options?: AlertOptions) => void;
+    hideAlert: () => void;
+}
+export declare const AlertModalContext: React.Context<AlertModalContextType>;
+export declare function AlertModalProvider({ children }: {
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function useAlertModal(): AlertModalContextType;
+export {};
+//# sourceMappingURL=alert-modal.d.ts.map

package/dist/components/ui/alert-modal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert-modal.d.ts","sourceRoot":"","sources":["../../../src/components/ui/alert-modal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA2D,MAAM,OAAO,CAAC;AAYhF,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,CAAC;AAEjE,UAAU,YAAY;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AASD,UAAU,qBAAqB;IAC7B,SAAS,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,SAAS,EAAE,OAAO,CAAC,EAAE,YAAY,KAAK,IAAI,CAAC;IAC/E,SAAS,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,eAAO,MAAM,iBAAiB,sCAA8D,CAAC;AAE7F,wBAAgB,kBAAkB,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,2CA6C7E;AAED,wBAAgB,aAAa,0BAM5B"}

package/dist/components/ui/alert-modal.js

@@ -0,0 +1,59 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useState, useCallback } from 'react';
+import { CheckCircle2, AlertCircle, Info, AlertTriangle } from 'lucide-react';
+import { cn } from '../../lib/utils/index.js';
+import { Button } from './button.js';
+export const AlertModalContext = createContext(undefined);
+export function AlertModalProvider({ children }) {
+    const [alert, setAlert] = useState({
+        isOpen: false,
+        message: '',
+        type: 'info',
+        options: {}
+    });
+    const showAlert = useCallback((message, type = 'info', options = {}) => {
+        setAlert({
+            isOpen: true,
+            message,
+            type,
+            options
+        });
+    }, []);
+    const hideAlert = useCallback(() => {
+        setAlert(prev => ({ ...prev, isOpen: false }));
+    }, []);
+    const handleConfirm = () => {
+        alert.options.onConfirm?.();
+        hideAlert();
+    };
+    const handleCancel = () => {
+        alert.options.onCancel?.();
+        hideAlert();
+    };
+    return (_jsxs(AlertModalContext.Provider, { value: { showAlert, hideAlert }, children: [children, _jsx(AlertModalContainer, { isOpen: alert.isOpen, message: alert.message, type: alert.type, options: alert.options, onConfirm: handleConfirm, onCancel: handleCancel, onClose: hideAlert })] }));
+}
+export function useAlertModal() {
+    const context = useContext(AlertModalContext);
+    if (context === undefined) {
+        throw new Error('useAlertModal must be used within an AlertModalProvider');
+    }
+    return context;
+}
+function AlertModalContainer({ isOpen, message, type, options, onConfirm, onCancel, onClose }) {
+    if (!isOpen)
+        return null;
+    const icons = {
+        success: _jsx(CheckCircle2, { className: "h-10 w-10 text-green-500" }),
+        error: _jsx(AlertCircle, { className: "h-10 w-10 text-red-500" }),
+        warning: _jsx(AlertTriangle, { className: "h-10 w-10 text-amber-500" }),
+        info: _jsx(Info, { className: "h-10 w-10 text-blue-500" })
+    };
+    const colors = {
+        success: "bg-green-50 border-green-100",
+        error: "bg-red-50 border-red-100",
+        warning: "bg-amber-50 border-amber-100",
+        info: "bg-blue-50 border-blue-100"
+    };
+    return (_jsxs("div", { className: "fixed inset-0 z-[200] flex items-center justify-center p-4", children: [_jsx("div", { className: "absolute inset-0 bg-slate-900/40 backdrop-blur-md animate-in fade-in duration-300", onClick: onClose }), _jsxs("div", { className: "relative bg-white rounded-[24px] shadow-2xl w-full max-w-sm overflow-hidden animate-in zoom-in-95 slide-in-from-bottom-4 duration-300 border border-slate-100", children: [_jsxs("div", { className: "p-8 flex flex-col items-center text-center", children: [_jsx("div", { className: cn("w-20 h-20 rounded-full flex items-center justify-center mb-6 animate-in zoom-in-50 duration-500 delay-150", colors[type]), children: icons[type] }), _jsx("h3", { className: "text-xl font-extrabold text-slate-900 mb-2 leading-tight", children: options.title || (type.charAt(0).toUpperCase() + type.slice(1)) }), _jsx("p", { className: "text-slate-500 text-sm font-medium leading-relaxed px-2", children: message })] }), _jsxs("div", { className: "px-8 pb-8 flex flex-col gap-3", children: [_jsx(Button, { onClick: onConfirm, className: cn("w-full h-12 rounded-xl font-bold text-sm uppercase tracking-wider transition-all active:scale-[0.98]", type === 'success' && "bg-green-600 hover:bg-green-700 text-white shadow-lg shadow-green-100", type === 'error' && "bg-red-600 hover:bg-red-700 text-white shadow-lg shadow-red-100", type === 'warning' && "bg-amber-600 hover:bg-amber-700 text-white shadow-lg shadow-amber-100", type === 'info' && "bg-slate-900 hover:bg-slate-800 text-white shadow-lg shadow-slate-200"), children: options.confirmText || 'Understand' }), options.showCancel && (_jsx(Button, { variant: "ghost", onClick: onCancel, className: "w-full h-12 rounded-xl font-bold text-sm uppercase tracking-wider text-slate-400 hover:text-slate-600 hover:bg-slate-50", children: options.cancelText || 'Cancel' }))] })] })] }));
+}

package/dist/components/ui/avatar-image.d.ts

@@ -0,0 +1,11 @@
+interface AvatarImageProps {
+    src?: string | null;
+    alt?: string;
+    size?: number;
+    className?: string;
+    fallbackIcon?: React.ReactNode;
+    fill?: boolean;
+}
+export declare function AvatarImage({ src, alt, size, className, fallbackIcon, fill, }: AvatarImageProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=avatar-image.d.ts.map

package/dist/components/ui/avatar-image.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar-image.d.ts","sourceRoot":"","sources":["../../../src/components/ui/avatar-image.tsx"],"names":[],"mappings":"AAMA,UAAU,gBAAgB;IACxB,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,wBAAgB,WAAW,CAAC,EAC1B,GAAG,EACH,GAAe,EACf,IAAS,EACT,SAAS,EACT,YAAY,EACZ,IAAY,GACb,EAAE,gBAAgB,2CAwElB"}

package/dist/components/ui/avatar-image.js

@@ -0,0 +1,39 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useRef } from 'react';
+import { User } from 'lucide-react';
+import { cn } from '../../lib/utils/index.js';
+export function AvatarImage({ src, alt = 'Profile', size = 40, className, fallbackIcon, fill = false, }) {
+    const [imageError, setImageError] = useState(false);
+    const [imageLoaded, setImageLoaded] = useState(false);
+    const imageRef = useRef(null);
+    const prevSrcRef = useRef(src);
+    // Reset error and loading state when src changes
+    useEffect(() => {
+        const currentSrcValue = typeof src === 'string' && src.trim() ? src : undefined;
+        const hasChanged = currentSrcValue !== prevSrcRef.current;
+        if (hasChanged) {
+            setImageError(false);
+            setImageLoaded(false);
+            prevSrcRef.current = currentSrcValue;
+            // Reset image ref to force reload
+            if (imageRef.current) {
+                imageRef.current.src = '';
+            }
+        }
+    }, [src]);
+    const handleLoad = () => {
+        setImageLoaded(true);
+        setImageError(false);
+    };
+    const handleError = () => {
+        console.warn('[AvatarImage] Image failed to load:', { src, alt });
+        setImageError(true);
+        setImageLoaded(false);
+    };
+    // If no src or error occurred, show fallback
+    if (!src || imageError) {
+        return (_jsx("div", { className: cn('flex items-center justify-center bg-gradient-to-br from-gray-100 to-gray-200 text-gray-400 rounded-full', className), style: fill ? undefined : { width: size, height: size }, children: fallbackIcon || _jsx(User, { className: "text-gray-400", style: { width: `${size / 2}px`, height: `${size / 2}px` } }) }));
+    }
+    return (_jsxs("div", { className: cn('relative overflow-hidden rounded-full', className), style: fill ? undefined : { width: size, height: size }, children: [!imageLoaded && (_jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-gradient-to-br from-gray-100 to-gray-200 z-10", children: _jsx(User, { className: "text-gray-400 animate-pulse", style: { width: `${size / 2}px`, height: `${size / 2}px` } }) })), _jsx("img", { ref: imageRef, src: src, alt: alt, className: cn('object-cover transition-opacity duration-200 rounded-full', imageLoaded ? 'opacity-100' : 'opacity-0', fill ? 'w-full h-full' : ''), style: fill ? undefined : { width: size, height: size }, onLoad: handleLoad, onError: handleError, loading: "lazy" })] }));
+}

package/dist/components/ui/background-patterns.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+export declare const DotPattern: ({ className, width, height, cx, cy, cr, color }: {
+    className?: string;
+    width?: number;
+    height?: number;
+    cx?: number;
+    cy?: number;
+    cr?: number;
+    color?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const GridPattern: ({ className, width, height, strokeDasharray, stroke }: {
+    className?: string;
+    width?: number;
+    height?: number;
+    strokeDasharray?: string;
+    stroke?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const WavePattern: ({ className, color }: {
+    className?: string;
+    color?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const CircleBlur: ({ className, color, style }: {
+    className?: string;
+    color?: string;
+    style?: React.CSSProperties;
+}) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=background-patterns.d.ts.map

package/dist/components/ui/background-patterns.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"background-patterns.d.ts","sourceRoot":"","sources":["../../../src/components/ui/background-patterns.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,eAAO,MAAM,UAAU,GAAI;;;;;;;;CAAsF,4CAqBhH,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI;;;;;;CAAsF,4CA2BjH,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI;;;CAAqC,4CAahE,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,6BAA+D;IAAE,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;CAAE,4CAK5J,CAAC"}

package/dist/components/ui/background-patterns.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const DotPattern = ({ className = "", width = 20, height = 20, cx = 1, cy = 1, cr = 1, color = "#CBD5E1" }) => (_jsxs("svg", { className: className, width: "100%", height: "100%", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("defs", { children: _jsx("pattern", { id: "dot-pattern", x: "0", y: "0", width: width, height: height, patternUnits: "userSpaceOnUse", children: _jsx("circle", { cx: cx, cy: cy, r: cr, fill: color }) }) }), _jsx("rect", { width: "100%", height: "100%", fill: "url(#dot-pattern)" })] }));
+export const GridPattern = ({ className = "", width = 40, height = 40, strokeDasharray = "0", stroke = "#E2E8F0" }) => (_jsxs("svg", { className: className, width: "100%", height: "100%", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("defs", { children: _jsx("pattern", { id: "grid-pattern", x: "0", y: "0", width: width, height: height, patternUnits: "userSpaceOnUse", children: _jsx("path", { d: `M ${width} 0 L 0 0 0 ${height}`, fill: "none", stroke: stroke, strokeWidth: "1", strokeDasharray: strokeDasharray }) }) }), _jsx("rect", { width: "100%", height: "100%", fill: "url(#grid-pattern)" })] }));
+export const WavePattern = ({ className = "", color = "#F1F5F9" }) => (_jsx("svg", { className: className, viewBox: "0 0 1440 320", xmlns: "http://www.w3.org/2000/svg", preserveAspectRatio: "none", children: _jsx("path", { fill: color, fillOpacity: "1", d: "M0,96L48,112C96,128,192,160,288,160C384,160,480,128,576,112C672,96,768,96,864,112C960,128,1056,160,1152,160C1248,160,1344,128,1392,112L1440,96L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z" }) }));
+export const CircleBlur = ({ className = "", color = "rgba(99, 102, 241, 0.15)", style }) => (_jsx("div", { className: `absolute rounded-full filter blur-3xl ${className}`, style: { backgroundColor: color, ...style } }));

package/dist/components/ui/badge.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+declare const badgeVariants: (props?: {
+    variant?: "default" | "destructive" | "outline" | "secondary";
+} & import("class-variance-authority/types").ClassProp) => string;
+export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
+}
+declare function Badge({ className, variant, ...props }: BadgeProps): import("react/jsx-runtime").JSX.Element;
+export { Badge, badgeVariants };
+//# sourceMappingURL=badge.d.ts.map

package/dist/components/ui/badge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../../src/components/ui/badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAIjE,QAAA,MAAM,aAAa;;iEAkBlB,CAAA;AAED,MAAM,WAAW,UACf,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAC1C,YAAY,CAAC,OAAO,aAAa,CAAC;CAAG;AAEzC,iBAAS,KAAK,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,UAAU,2CAI1D;AAED,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,CAAA"}

package/dist/components/ui/badge.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { cn } from "../../lib/utils/index.js";
+const badgeVariants = cva("inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", {
+    variants: {
+        variant: {
+            default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+            secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+            destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+            outline: "text-foreground",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+    },
+});
+function Badge({ className, variant, ...props }) {
+    return (_jsx("div", { className: cn(badgeVariants({ variant }), className), ...props }));
+}
+export { Badge, badgeVariants };

package/dist/components/ui/breadcrumbs.d.ts

@@ -0,0 +1,12 @@
+interface BreadcrumbItem {
+    label: string;
+    href?: string;
+}
+interface BreadcrumbsProps {
+    items: BreadcrumbItem[];
+    variant?: 'default' | 'light';
+    className?: string;
+}
+export declare function Breadcrumbs({ items, variant, className }: BreadcrumbsProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=breadcrumbs.d.ts.map

package/dist/components/ui/breadcrumbs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumbs.d.ts","sourceRoot":"","sources":["../../../src/components/ui/breadcrumbs.tsx"],"names":[],"mappings":"AAMA,UAAU,cAAc;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,UAAU,gBAAgB;IACxB,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,OAAmB,EAAE,SAAS,EAAE,EAAE,gBAAgB,2CAmCtF"}

package/dist/components/ui/breadcrumbs.js

@@ -0,0 +1,12 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import Link from 'next/link';
+import { formatDisplayLabel } from '../../lib/utils/index.js';
+export function Breadcrumbs({ items, variant = 'default', className }) {
+    const isLight = variant === 'light';
+    return (_jsx("nav", { className: `flex items-center gap-3 text-[10px] sm:text-[11px] uppercase tracking-[0.1em] font-bold ${isLight ? 'text-white' : 'text-brand-text-muted/70'} ${className || ''}`, children: items.map((item, index) => {
+            const label = formatDisplayLabel(item.label);
+            return (_jsxs(React.Fragment, { children: [index > 0 && (_jsx("span", { className: `text-[10px] opacity-30 ${isLight ? 'text-white' : 'text-brand-navy'}`, children: "/" })), _jsx("div", { className: "flex items-center", children: item.href && index < items.length - 1 ? (_jsx(Link, { href: item.href, className: `hover:text-brand-terracotta transition-colors whitespace-nowrap ${isLight ? 'text-white' : 'text-brand-text-muted'}`, children: label })) : (_jsx("span", { className: `whitespace-nowrap ${index === items.length - 1 ? (isLight ? 'text-white' : 'text-brand-navy') : ''} ${index === items.length - 1 ? 'truncate max-w-[120px] sm:max-w-none' : ''}`, children: label })) })] }, index));
+        }) }));
+}

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

@@ -0,0 +1,11 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+declare const buttonVariants: (props?: {
+    variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost";
+    size?: "icon" | "default" | "sm" | "lg" | "xl" | "icon-sm" | "icon-lg";
+} & import("class-variance-authority/types").ClassProp) => string;
+declare function Button({ className, variant, size, asChild, ...props }: React.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export { Button, buttonVariants };
+//# sourceMappingURL=button.d.ts.map

package/dist/components/ui/button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/components/ui/button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAIjE,QAAA,MAAM,cAAc;;;iEA+BnB,CAAA;AAED,iBAAS,MAAM,CAAC,EACd,SAAS,EACT,OAAO,EACP,IAAI,EACJ,OAAe,EACf,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,GAC/B,YAAY,CAAC,OAAO,cAAc,CAAC,GAAG;IACpC,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,2CAUF;AAED,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,CAAA"}

package/dist/components/ui/button.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import { cn } from "../../lib/utils/index.js";
+const buttonVariants = cva("inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", {
+    variants: {
+        variant: {
+            default: "bg-[#1b0029] text-white hover:bg-[#220033] [&_svg]:text-white",
+            destructive: "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+            outline: "border border-[#1b0029]/15 bg-white text-[#1b0029] shadow-xs hover:bg-[#f7f5f0] hover:text-[#1b0029]",
+            secondary: "bg-[#f7f5f0] text-[#1b0029] hover:bg-[#ece8de]",
+            ghost: "text-[#1b0029] hover:bg-[#f7f5f0] hover:text-[#1b0029]",
+            link: "text-[#440066] underline-offset-4 hover:underline",
+        },
+        size: {
+            default: "h-9 px-4 py-2 has-[>svg]:px-3",
+            sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+            lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+            xl: "h-14 min-h-14 px-8 text-base rounded-md has-[>svg]:px-5",
+            icon: "size-9",
+            "icon-sm": "size-8",
+            "icon-lg": "size-10",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+        size: "default",
+    },
+});
+function Button({ className, variant, size, asChild = false, ...props }) {
+    const Comp = asChild ? Slot : "button";
+    return (_jsx(Comp, { "data-slot": "button", className: cn(buttonVariants({ variant, size }), className), ...props }));
+}
+export { Button, buttonVariants };

package/dist/components/ui/card.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+declare function Card({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function CardHeader({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function CardTitle({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function CardDescription({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function CardAction({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function CardContent({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function CardFooter({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent, };
+//# sourceMappingURL=card.d.ts.map

package/dist/components/ui/card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../../src/components/ui/card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,iBAAS,IAAI,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAWjE;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAWvE;AAED,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAQtE;AAED,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAQ5E;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAWvE;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAQxE;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAQvE;AAED,OAAO,EACL,IAAI,EACJ,UAAU,EACV,UAAU,EACV,SAAS,EACT,UAAU,EACV,eAAe,EACf,WAAW,GACZ,CAAA"}

package/dist/components/ui/card.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../../lib/utils/index.js";
+function Card({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "card", className: cn("bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm", className), ...props }));
+}
+function CardHeader({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "card-header", className: cn("@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6", className), ...props }));
+}
+function CardTitle({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "card-title", className: cn("leading-none font-semibold", className), ...props }));
+}
+function CardDescription({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "card-description", className: cn("text-muted-foreground text-sm", className), ...props }));
+}
+function CardAction({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "card-action", className: cn("col-start-2 row-span-2 row-start-1 self-start justify-self-end", className), ...props }));
+}
+function CardContent({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "card-content", className: cn("px-6", className), ...props }));
+}
+function CardFooter({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "card-footer", className: cn("flex items-center px-6 [.border-t]:pt-6", className), ...props }));
+}
+export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent, };

package/dist/components/ui/category-tree.d.ts

@@ -0,0 +1,16 @@
+import { StoreCategory } from '../../lib/store-types';
+export interface CategoryTreeProps {
+    categories: StoreCategory[];
+    selectedCategoryIds?: string[];
+    onCategoryToggle?: (categoryId: string, isSelected: boolean) => void;
+    mode?: 'checkbox' | 'button' | 'link';
+    onCategorySelect?: (categorySlug: string) => void;
+    className?: string;
+    showAllOption?: boolean;
+    onAllSelect?: () => void;
+    isAllSelected?: boolean;
+    storeSlug?: string;
+    linkBasePath?: string;
+}
+export declare function CategoryTree({ categories, selectedCategoryIds, onCategoryToggle, mode, onCategorySelect, className, showAllOption, onAllSelect, isAllSelected, storeSlug, linkBasePath, }: CategoryTreeProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=category-tree.d.ts.map

package/dist/components/ui/category-tree.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"category-tree.d.ts","sourceRoot":"","sources":["../../../src/components/ui/category-tree.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAKlD,MAAM,WAAW,iBAAiB;IAChC,UAAU,EAAE,aAAa,EAAE,CAAC;IAC5B,mBAAmB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC/B,gBAAgB,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;IACrE,IAAI,CAAC,EAAE,UAAU,GAAG,QAAQ,GAAG,MAAM,CAAC;IACtC,gBAAgB,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,IAAI,CAAC;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAwLD,wBAAgB,YAAY,CAAC,EAC3B,UAAU,EACV,mBAAwB,EACxB,gBAAgB,EAChB,IAAiB,EACjB,gBAAgB,EAChB,SAAS,EACT,aAAqB,EACrB,WAAW,EACX,aAAqB,EACrB,SAAS,EACT,YAAY,GACb,EAAE,iBAAiB,2CAoFnB"}

package/dist/components/ui/category-tree.js

@@ -0,0 +1,74 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useMemo } from 'react';
+import Link from 'next/link';
+import { buildCategoryTree } from '../../lib/utils/category-tree.js';
+import { ChevronDown, ChevronRight, Check } from 'lucide-react';
+import { cn, formatDisplayLabel } from '../../lib/utils/index.js';
+function CategoryItem({ category, level, selectedCategoryIds, onCategoryToggle, mode, onCategorySelect, expandedCategories, onToggleExpand, storeSlug, linkBasePath, }) {
+    const hasChildren = category.children && category.children.length > 0;
+    const isExpanded = expandedCategories.has(category.id);
+    const isSelected = selectedCategoryIds.includes(category.id);
+    const handleClick = () => {
+        if (mode === 'button' && onCategorySelect) {
+            onCategorySelect(category.slug);
+        }
+        else if (mode === 'checkbox') {
+            onCategoryToggle(category.id, !isSelected);
+        }
+        // Link mode is handled by Link component, no onClick needed
+    };
+    const href = mode === 'link' && storeSlug
+        ? `${linkBasePath || ''}/${storeSlug}/categories/${category.slug}`
+        : undefined;
+    const handleExpandToggle = (e) => {
+        e.stopPropagation();
+        if (hasChildren) {
+            onToggleExpand(category.id);
+        }
+    };
+    const baseClasses = cn('flex items-center gap-2 w-full text-left transition-colors rounded-lg', mode === 'checkbox'
+        ? 'p-2 -ml-2 -mr-2 cursor-pointer group hover:bg-blue-50 hover:text-blue-600'
+        : mode === 'link'
+            ? 'px-4 py-2.5 text-sm text-gray-600 hover:text-gray-900 transition-colors group'
+            : 'px-3 py-2 cursor-pointer group hover:bg-slate-100 hover:text-slate-900', isSelected && mode === 'checkbox' && 'bg-blue-50 text-blue-600', isSelected && mode === 'button' && 'bg-blue-50 text-blue-600');
+    const content = (_jsxs(_Fragment, { children: [mode !== 'link' && (_jsx("button", { type: "button", onClick: handleExpandToggle, className: cn('flex items-center justify-center w-5 h-5 rounded transition-colors', hasChildren ? 'cursor-pointer hover:bg-gray-200' : 'cursor-default opacity-0', level > 0 && 'ml-2'), "aria-label": isExpanded ? 'Collapse' : 'Expand', children: hasChildren && (isExpanded ? (_jsx(ChevronDown, { className: "h-3.5 w-3.5 text-gray-500" })) : (_jsx(ChevronRight, { className: "h-3.5 w-3.5 text-gray-500" }))) })), mode === 'link' && hasChildren && (_jsx("button", { type: "button", onClick: handleExpandToggle, className: cn('flex items-center justify-center w-5 h-5 rounded transition-colors cursor-pointer hover:bg-gray-200', level > 0 && 'ml-2'), "aria-label": isExpanded ? 'Collapse' : 'Expand', children: isExpanded ? (_jsx(ChevronDown, { className: "h-3.5 w-3.5 text-gray-500" })) : (_jsx(ChevronRight, { className: "h-3.5 w-3.5 text-gray-500" })) })), mode === 'checkbox' && (_jsx("div", { className: cn('w-4 h-4 rounded border flex items-center justify-center transition-colors', isSelected
+                    ? 'bg-blue-600 border-blue-600'
+                    : 'border-gray-300 group-hover:border-blue-400'), children: isSelected && _jsx(Check, { className: "h-3 w-3 text-white" }) })), _jsx("span", { className: cn('text-sm font-medium flex-1', level === 0 ? 'text-gray-900' : 'text-gray-700', isSelected && 'text-blue-600'), children: formatDisplayLabel(category.name) }), mode === 'button' && isSelected && (_jsx(Check, { className: "h-4 w-4 text-blue-600" })), mode === 'link' && !hasChildren && (_jsx(ChevronRight, { className: "h-3 w-3 text-gray-300 group-hover:text-gray-500" }))] }));
+    return (_jsxs("div", { className: "space-y-1", children: [mode === 'link' && href ? (hasChildren ? (_jsx("div", { className: baseClasses, onClick: (e) => {
+                    e.preventDefault();
+                    onToggleExpand(category.id);
+                }, children: content })) : (_jsx(Link, { href: href, className: baseClasses, children: content }))) : (_jsx("div", { className: baseClasses, onClick: handleClick, children: content })), hasChildren && isExpanded && (_jsx("div", { className: cn('space-y-1', level === 0 ? 'ml-4' : 'ml-6'), style: level > 1 ? { marginLeft: `${(level + 1) * 0.75}rem` } : undefined, children: category.children.map((child) => (_jsx(CategoryItem, { category: child, level: level + 1, selectedCategoryIds: selectedCategoryIds, onCategoryToggle: onCategoryToggle, mode: mode, onCategorySelect: onCategorySelect, expandedCategories: expandedCategories, onToggleExpand: onToggleExpand, storeSlug: storeSlug, linkBasePath: linkBasePath }, child.id))) }))] }));
+}
+export function CategoryTree({ categories, selectedCategoryIds = [], onCategoryToggle, mode = 'checkbox', onCategorySelect, className, showAllOption = false, onAllSelect, isAllSelected = false, storeSlug, linkBasePath, }) {
+    const [expandedCategories, setExpandedCategories] = useState(new Set());
+    // Build category tree from flat array
+    const categoryTree = useMemo(() => {
+        return buildCategoryTree(categories);
+    }, [categories]);
+    const handleToggleExpand = (categoryId) => {
+        setExpandedCategories(prev => {
+            const next = new Set(prev);
+            if (next.has(categoryId)) {
+                next.delete(categoryId);
+            }
+            else {
+                next.add(categoryId);
+            }
+            return next;
+        });
+    };
+    const handleCategoryToggle = (categoryId, isSelected) => {
+        if (onCategoryToggle) {
+            onCategoryToggle(categoryId, isSelected);
+        }
+    };
+    if (categoryTree.length === 0) {
+        return (_jsx("div", { className: cn('text-sm text-gray-500 italic', className), children: "No categories available" }));
+    }
+    return (_jsxs("div", { className: cn('space-y-1', className), children: [showAllOption && onAllSelect && (_jsxs("button", { type: "button", onClick: onAllSelect, className: cn('flex items-center gap-2 w-full text-left px-3 py-2 rounded-lg text-sm font-medium transition-colors', mode === 'checkbox'
+                    ? 'p-2 -ml-2 -mr-2 cursor-pointer group hover:bg-blue-50 hover:text-blue-600'
+                    : 'cursor-pointer group hover:bg-slate-100 hover:text-slate-900', isAllSelected && 'bg-blue-50 text-blue-600'), children: [mode === 'checkbox' && (_jsx("div", { className: cn('w-4 h-4 rounded border flex items-center justify-center transition-colors', isAllSelected
+                            ? 'bg-blue-600 border-blue-600'
+                            : 'border-gray-300 group-hover:border-blue-400'), children: isAllSelected && _jsx(Check, { className: "h-3 w-3 text-white" }) })), _jsx("span", { className: "flex-1", children: "All Products" }), mode === 'button' && isAllSelected && (_jsx(Check, { className: "h-4 w-4 text-blue-600" }))] })), categoryTree.map((category) => (_jsx(CategoryItem, { category: category, level: 0, selectedCategoryIds: selectedCategoryIds, onCategoryToggle: handleCategoryToggle, mode: mode, onCategorySelect: onCategorySelect, expandedCategories: expandedCategories, onToggleExpand: handleToggleExpand, storeSlug: storeSlug, linkBasePath: linkBasePath }, category.id)))] }));
+}

package/dist/components/ui/checkout-button.d.ts

@@ -0,0 +1,11 @@
+import { StoreConfig } from '../../lib/store-types';
+interface CheckoutButtonProps {
+    storeConfig: StoreConfig;
+    className?: string;
+    children?: React.ReactNode;
+    variant?: 'default' | 'outline' | 'ghost';
+    size?: 'sm' | 'lg' | 'icon' | 'icon-sm' | 'icon-lg';
+}
+export declare function CheckoutButton({ storeConfig, className, children, variant, size, }: CheckoutButtonProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=checkout-button.d.ts.map

package/dist/components/ui/checkout-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkout-button.d.ts","sourceRoot":"","sources":["../../../src/components/ui/checkout-button.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAahD,UAAU,mBAAmB;IAC3B,WAAW,EAAE,WAAW,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IAC1C,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,CAAC;CACrD;AAED,wBAAgB,cAAc,CAAC,EAC7B,WAAW,EACX,SAAS,EACT,QAAqB,EACrB,OAAmB,EACnB,IAAW,GACZ,EAAE,mBAAmB,2CAsXrB"}