@deneb-ui/ui 2.0.20 → 2.0.21

package/dist/EditableCartDrawer.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { CartItem } from './cart/useCart';
+export interface EditableCartDrawerProps {
+    basePath?: string;
+    whatsappNumber?: string;
+    storeName?: string;
+    currency?: string;
+    checkoutUrl?: string;
+    freeShippingThreshold?: number;
+    onCheckout?: (items: CartItem[], total: number) => void;
+    className?: string;
+}
+export declare function EditableCartDrawer({ basePath, whatsappNumber, storeName, currency, checkoutUrl, freeShippingThreshold, onCheckout, className, }: EditableCartDrawerProps): React.JSX.Element | null;
+export declare const CartDrawer: typeof EditableCartDrawer;

package/dist/EditableCartDrawer.js

@@ -0,0 +1,61 @@
+"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CartDrawer = void 0;
+exports.EditableCartDrawer = EditableCartDrawer;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const useCart_1 = require("./cart/useCart");
+const SiteDataProvider_1 = require("./SiteDataProvider");
+const urls_1 = require("./utils/urls");
+function EditableCartDrawer({ basePath = 'cart', whatsappNumber = '94770000000', storeName, currency = '$', checkoutUrl, freeShippingThreshold, onCheckout, className = '', }) {
+    const { items, isOpen, closeCart, removeItem, updateQuantity, clearCart, totalCount, subtotal, getWhatsAppOrderUrl, } = (0, useCart_1.useCart)();
+    const { siteData } = (0, SiteDataProvider_1.useSiteData)();
+    // Helper to read content from siteData
+    const getContent = (key, fallback) => {
+        const section = siteData?.content?.[basePath];
+        return section?.[key] || fallback;
+    };
+    const fieldPath = (key) => `${basePath}.${key}`;
+    // Close on Escape key
+    (0, react_1.useEffect)(() => {
+        const handleKeyDown = (e) => {
+            if (e.key === 'Escape')
+                closeCart();
+        };
+        if (isOpen) {
+            document.body.style.overflow = 'hidden';
+            window.addEventListener('keydown', handleKeyDown);
+        }
+        return () => {
+            document.body.style.overflow = '';
+            window.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [isOpen, closeCart]);
+    // If closed, return null so hidden markers do not fail static compliance
+    if (!isOpen)
+        return null;
+    const title = getContent('title', 'Shopping Cart');
+    const subtitle = getContent('subtitle', `${totalCount} item${totalCount !== 1 ? 's' : ''} in your cart`);
+    const emptyTitle = getContent('emptyTitle', 'Your cart is empty');
+    const emptyMessage = getContent('emptyMessage', 'Discover our latest arrivals and add items to your bag.');
+    const subtotalLabel = getContent('subtotalLabel', 'Subtotal');
+    const shippingNote = getContent('shippingNote', 'Taxes and shipping calculated at checkout');
+    const checkoutButtonText = getContent('checkoutButtonText', 'Proceed to Checkout');
+    const whatsappButtonText = getContent('whatsappButtonText', 'Order via WhatsApp');
+    const clearCartText = getContent('clearCartText', 'Clear all');
+    const whatsappHref = getWhatsAppOrderUrl(whatsappNumber, {
+        storeName,
+        currency,
+    });
+    const progressPercent = freeShippingThreshold
+        ? Math.min(100, Math.round((subtotal / freeShippingThreshold) * 100))
+        : 100;
+    return ((0, jsx_runtime_1.jsxs)("div", { className: `deneb-cart-drawer-root fixed inset-0 z-50 flex justify-end ${className}`, children: [(0, jsx_runtime_1.jsx)("div", { className: "fixed inset-0 bg-black/60 backdrop-blur-sm transition-opacity", onClick: closeCart, "data-preview-static": "cart-backdrop", "aria-hidden": "true" }), (0, jsx_runtime_1.jsxs)("aside", { className: "relative z-10 flex h-full w-full max-w-md flex-col bg-neutral-900 text-white shadow-2xl transition-transform duration-300 ease-out border-l border-neutral-800", "aria-label": "Shopping Cart Drawer", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between border-b border-neutral-800 px-6 py-5", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h2", { className: "text-xl font-bold tracking-tight text-white", "data-preview-field-path": fieldPath('title'), children: title }), (0, jsx_runtime_1.jsx)("p", { className: "text-xs text-neutral-400 mt-0.5", "data-preview-field-path": fieldPath('subtitle'), children: subtitle })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [items.length > 0 && ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: clearCart, className: "text-xs text-neutral-400 hover:text-red-400 transition-colors px-2 py-1 rounded", "data-preview-static": "cart-clear-btn", children: (0, jsx_runtime_1.jsx)("span", { "data-preview-field-path": fieldPath('clearCartText'), children: clearCartText }) })), (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: closeCart, className: "rounded-full p-2 text-neutral-400 hover:bg-neutral-800 hover:text-white transition-colors", "data-preview-static": "cart-close-btn", "aria-label": "Close cart", children: (0, jsx_runtime_1.jsx)("svg", { className: "h-5 w-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) })] })] }), freeShippingThreshold && ((0, jsx_runtime_1.jsxs)("div", { className: "border-b border-neutral-800 bg-neutral-950/50 px-6 py-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between text-xs text-neutral-400 mb-1.5", children: [(0, jsx_runtime_1.jsx)("span", { children: subtotal >= freeShippingThreshold ? ((0, jsx_runtime_1.jsx)("span", { className: "font-semibold text-emerald-400", children: "\uD83C\uDF89 You unlocked free shipping!" })) : ((0, jsx_runtime_1.jsxs)("span", { children: ["Add ", (0, jsx_runtime_1.jsxs)("strong", { className: "text-white", children: [currency, (freeShippingThreshold - subtotal).toFixed(2)] }), " more for free shipping"] })) }), (0, jsx_runtime_1.jsxs)("span", { children: [progressPercent, "%"] })] }), (0, jsx_runtime_1.jsx)("div", { className: "h-1.5 w-full overflow-hidden rounded-full bg-neutral-800", children: (0, jsx_runtime_1.jsx)("div", { className: "h-full bg-emerald-500 transition-all duration-300", style: { width: `${progressPercent}%` } }) })] })), (0, jsx_runtime_1.jsx)("div", { className: "flex-1 overflow-y-auto px-6 py-4", children: items.length === 0 ? ((0, jsx_runtime_1.jsxs)("div", { className: "flex h-full flex-col items-center justify-center text-center py-12", children: [(0, jsx_runtime_1.jsx)("div", { className: "mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-neutral-800 text-neutral-400", children: (0, jsx_runtime_1.jsx)("svg", { className: "h-8 w-8", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" }) }) }), (0, jsx_runtime_1.jsx)("h3", { className: "text-base font-semibold text-white", "data-preview-field-path": fieldPath('emptyTitle'), children: emptyTitle }), (0, jsx_runtime_1.jsx)("p", { className: "mt-1 text-sm text-neutral-400 max-w-xs", "data-preview-field-path": fieldPath('emptyMessage'), children: emptyMessage })] })) : ((0, jsx_runtime_1.jsx)("ul", { className: "divide-y divide-neutral-800", "data-preview-list-path": fieldPath('items'), children: items.map((item, idx) => ((0, jsx_runtime_1.jsxs)("li", { className: "flex gap-4 py-4", "data-preview-item-path": `${fieldPath('items')}[${idx}]`, children: [item.image ? ((0, jsx_runtime_1.jsx)("img", { src: (0, urls_1.withBasePath)(item.image), alt: item.name, className: "h-20 w-20 flex-shrink-0 rounded-lg object-cover bg-neutral-800 border border-neutral-700", "data-preview-static": "cart-item-image" })) : ((0, jsx_runtime_1.jsx)("div", { className: "flex h-20 w-20 flex-shrink-0 items-center justify-center rounded-lg bg-neutral-800 text-neutral-500 border border-neutral-700", "data-preview-static": "cart-item-placeholder", children: (0, jsx_runtime_1.jsx)("svg", { className: "h-8 w-8", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, 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" }) }) })), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-1 flex-col justify-between", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex justify-between", children: [(0, jsx_runtime_1.jsx)("h4", { className: "text-sm font-medium text-white line-clamp-1", children: item.name }), (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => removeItem(item.id, item.size, item.color), className: "text-neutral-500 hover:text-red-400 transition-colors p-1", "data-preview-static": "cart-item-remove", "aria-label": `Remove ${item.name}`, children: (0, jsx_runtime_1.jsx)("svg", { className: "h-4 w-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" }) }) })] }), (item.size || item.color) && ((0, jsx_runtime_1.jsxs)("p", { className: "mt-0.5 text-xs text-neutral-400", children: [item.size && `Size: ${item.size}`, item.size && item.color && ' · ', item.color && `Color: ${item.color}`] })), (0, jsx_runtime_1.jsxs)("p", { className: "mt-1 text-sm font-semibold text-emerald-400", children: [currency, (item.price * item.quantity).toFixed(2)] })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex items-center gap-2 mt-2", children: (0, jsx_runtime_1.jsxs)("div", { className: "inline-flex items-center rounded-lg border border-neutral-700 bg-neutral-800", children: [(0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => updateQuantity(item.id, item.quantity - 1, item.size, item.color), className: "h-7 w-7 flex items-center justify-center text-neutral-300 hover:text-white transition-colors", "data-preview-static": "cart-item-decrement", "aria-label": "Decrease quantity", children: "-" }), (0, jsx_runtime_1.jsx)("span", { className: "w-8 text-center text-xs font-semibold text-white", children: item.quantity }), (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => updateQuantity(item.id, item.quantity + 1, item.size, item.color), className: "h-7 w-7 flex items-center justify-center text-neutral-300 hover:text-white transition-colors", "data-preview-static": "cart-item-increment", "aria-label": "Increase quantity", children: "+" })] }) })] })] }, `${item.id}-${item.size || ''}-${item.color || ''}`))) })) }), items.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: "border-t border-neutral-800 bg-neutral-950 px-6 py-5", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex justify-between items-baseline mb-2", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-sm text-neutral-400", "data-preview-field-path": fieldPath('subtotalLabel'), children: subtotalLabel }), (0, jsx_runtime_1.jsxs)("span", { className: "text-xl font-bold text-white", children: [currency, subtotal.toFixed(2)] })] }), (0, jsx_runtime_1.jsx)("p", { className: "text-xs text-neutral-500 mb-4", "data-preview-field-path": fieldPath('shippingNote'), children: shippingNote }), (0, jsx_runtime_1.jsxs)("div", { className: "space-y-2.5", children: [(0, jsx_runtime_1.jsxs)("a", { href: whatsappHref, target: "_blank", rel: "noopener noreferrer", "data-preview-static": "cart-whatsapp-cta", className: "flex w-full items-center justify-center gap-2 rounded-xl bg-emerald-600 px-5 py-3.5 text-sm font-semibold text-white shadow-lg shadow-emerald-900/30 hover:bg-emerald-500 transition-all active:scale-[0.98]", children: [(0, jsx_runtime_1.jsx)("svg", { className: "h-4 w-4 fill-current", viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { d: "M12.031 6.172c-3.181 0-5.767 2.586-5.768 5.766-.001 1.298.38 2.27 1.019 3.287l-.711 2.598 2.664-.699c.971.531 1.769.813 2.796.813h.001c3.182 0 5.768-2.586 5.768-5.766 0-3.18-2.586-5.766-5.769-5.766zm9.969 5.766c0 5.518-4.482 10-10 10-1.745 0-3.415-.453-4.887-1.258l-5.113 1.341 1.365-4.989c-.931-1.537-1.465-3.327-1.465-5.094 0-5.518 4.482-10 10-10 5.518 0 10 4.482 10 10z" }) }), (0, jsx_runtime_1.jsx)("span", { "data-preview-field-path": fieldPath('whatsappButtonText'), children: whatsappButtonText })] }), (checkoutUrl || onCheckout) && ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => {
+                                            if (onCheckout)
+                                                onCheckout(items, subtotal);
+                                            if (checkoutUrl)
+                                                window.location.href = checkoutUrl;
+                                        }, "data-preview-static": "cart-checkout-btn", className: "flex w-full items-center justify-center rounded-xl bg-neutral-800 px-5 py-3 text-sm font-semibold text-white hover:bg-neutral-700 transition-colors", children: (0, jsx_runtime_1.jsx)("span", { "data-preview-field-path": fieldPath('checkoutButtonText'), children: checkoutButtonText }) }))] })] }))] })] }));
+}
+exports.CartDrawer = EditableCartDrawer;

package/dist/EditableFilterSidebar.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+export interface FilterState {
+    selectedCategories: string[];
+    priceRange: [number, number];
+    selectedSizes: string[];
+    inStockOnly?: boolean;
+}
+export interface EditableFilterSidebarProps {
+    basePath?: string;
+    categories?: string[];
+    sizes?: string[];
+    minPrice?: number;
+    maxPrice?: number;
+    currency?: string;
+    initialFilters?: Partial<FilterState>;
+    onFilterChange?: (filters: FilterState) => void;
+    className?: string;
+}
+export declare function EditableFilterSidebar({ basePath, categories, sizes, minPrice, maxPrice, currency, initialFilters, onFilterChange, className, }: EditableFilterSidebarProps): React.JSX.Element;
+export declare const FilterSidebar: typeof EditableFilterSidebar;

package/dist/EditableFilterSidebar.js

@@ -0,0 +1,84 @@
+"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FilterSidebar = void 0;
+exports.EditableFilterSidebar = EditableFilterSidebar;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const SiteDataProvider_1 = require("./SiteDataProvider");
+function EditableFilterSidebar({ basePath = 'filters', categories = ['All', 'Running', 'Lifestyle', 'Basketball', 'Training', 'Outdoor'], sizes = ['US 7', 'US 8', 'US 9', 'US 10', 'US 11', 'US 12'], minPrice = 0, maxPrice = 300, currency = '$', initialFilters, onFilterChange, className = '', }) {
+    const { siteData } = (0, SiteDataProvider_1.useSiteData)();
+    const [selectedCategories, setSelectedCategories] = (0, react_1.useState)(initialFilters?.selectedCategories || []);
+    const [currentPrice, setCurrentPrice] = (0, react_1.useState)(initialFilters?.priceRange ? initialFilters.priceRange[1] : maxPrice);
+    const [selectedSizes, setSelectedSizes] = (0, react_1.useState)(initialFilters?.selectedSizes || []);
+    const [inStockOnly, setInStockOnly] = (0, react_1.useState)(initialFilters?.inStockOnly || false);
+    const getContent = (key, fallback) => {
+        const section = siteData?.content?.[basePath];
+        return section?.[key] || fallback;
+    };
+    const fieldPath = (key) => `${basePath}.${key}`;
+    const triggerChange = (nextCats, nextPrice, nextSizes, nextInStock) => {
+        if (onFilterChange) {
+            onFilterChange({
+                selectedCategories: nextCats,
+                priceRange: [minPrice, nextPrice],
+                selectedSizes: nextSizes,
+                inStockOnly: nextInStock,
+            });
+        }
+    };
+    const toggleCategory = (cat) => {
+        const next = selectedCategories.includes(cat)
+            ? selectedCategories.filter((c) => c !== cat)
+            : [...selectedCategories, cat];
+        setSelectedCategories(next);
+        triggerChange(next, currentPrice, selectedSizes, inStockOnly);
+    };
+    const toggleSize = (size) => {
+        const next = selectedSizes.includes(size)
+            ? selectedSizes.filter((s) => s !== size)
+            : [...selectedSizes, size];
+        setSelectedSizes(next);
+        triggerChange(selectedCategories, currentPrice, next, inStockOnly);
+    };
+    const handlePriceChange = (e) => {
+        const val = Number(e.target.value);
+        setCurrentPrice(val);
+        triggerChange(selectedCategories, val, selectedSizes, inStockOnly);
+    };
+    const toggleInStock = () => {
+        const next = !inStockOnly;
+        setInStockOnly(next);
+        triggerChange(selectedCategories, currentPrice, selectedSizes, next);
+    };
+    const handleClearAll = () => {
+        setSelectedCategories([]);
+        setCurrentPrice(maxPrice);
+        setSelectedSizes([]);
+        setInStockOnly(false);
+        triggerChange([], maxPrice, [], false);
+    };
+    const activeFiltersCount = selectedCategories.length +
+        selectedSizes.length +
+        (currentPrice < maxPrice ? 1 : 0) +
+        (inStockOnly ? 1 : 0);
+    const title = getContent('title', 'Filters');
+    const categoryTitle = getContent('categoryTitle', 'Categories');
+    const priceTitle = getContent('priceTitle', 'Price Range');
+    const sizeTitle = getContent('sizeTitle', 'Size');
+    const availabilityTitle = getContent('availabilityTitle', 'Availability');
+    const inStockLabel = getContent('inStockLabel', 'In Stock Only');
+    const clearAllText = getContent('clearAllText', 'Clear All');
+    return ((0, jsx_runtime_1.jsxs)("aside", { className: `deneb-filter-sidebar w-full rounded-2xl border border-neutral-800 bg-neutral-900/80 backdrop-blur-md p-6 text-white shadow-xl ${className}`, "aria-label": "Product Filters", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between border-b border-neutral-800 pb-4 mb-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("h3", { className: "text-lg font-bold tracking-tight text-white", "data-preview-field-path": fieldPath('title'), children: title }), activeFiltersCount > 0 && ((0, jsx_runtime_1.jsx)("span", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-emerald-500 text-xs font-bold text-black", "data-preview-static": "filter-active-count", children: activeFiltersCount }))] }), activeFiltersCount > 0 && ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: handleClearAll, className: "text-xs font-medium text-neutral-400 hover:text-white transition-colors", "data-preview-static": "filter-clear-all", children: (0, jsx_runtime_1.jsx)("span", { "data-preview-field-path": fieldPath('clearAllText'), children: clearAllText }) }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "space-y-6", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h4", { className: "text-xs font-semibold uppercase tracking-wider text-neutral-400 mb-3", "data-preview-field-path": fieldPath('categoryTitle'), children: categoryTitle }), (0, jsx_runtime_1.jsx)("div", { className: "flex flex-wrap gap-2", children: categories.map((cat) => {
+                                    const isSelected = selectedCategories.includes(cat);
+                                    return ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => toggleCategory(cat), "data-preview-static": "filter-cat-btn", className: `rounded-lg px-3 py-1.5 text-xs font-medium transition-all ${isSelected
+                                            ? 'bg-white text-black shadow-md'
+                                            : 'bg-neutral-800 text-neutral-300 hover:bg-neutral-700 hover:text-white'}`, children: cat }, cat));
+                                }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "border-t border-neutral-800/80 pt-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex justify-between items-center mb-2", children: [(0, jsx_runtime_1.jsx)("h4", { className: "text-xs font-semibold uppercase tracking-wider text-neutral-400", "data-preview-field-path": fieldPath('priceTitle'), children: priceTitle }), (0, jsx_runtime_1.jsxs)("span", { className: "text-sm font-semibold text-emerald-400", "data-preview-static": "filter-price-display", children: ["Up to ", currency, currentPrice] })] }), (0, jsx_runtime_1.jsx)("input", { type: "range", min: minPrice, max: maxPrice, step: 5, value: currentPrice, onChange: handlePriceChange, "data-preview-static": "filter-price-slider", className: "w-full accent-emerald-500 bg-neutral-800 h-1.5 rounded-lg cursor-pointer" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex justify-between text-xs text-neutral-500 mt-1", children: [(0, jsx_runtime_1.jsxs)("span", { children: [currency, minPrice] }), (0, jsx_runtime_1.jsxs)("span", { children: [currency, maxPrice] })] })] }), sizes.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: "border-t border-neutral-800/80 pt-6", children: [(0, jsx_runtime_1.jsx)("h4", { className: "text-xs font-semibold uppercase tracking-wider text-neutral-400 mb-3", "data-preview-field-path": fieldPath('sizeTitle'), children: sizeTitle }), (0, jsx_runtime_1.jsx)("div", { className: "grid grid-cols-3 gap-2", children: sizes.map((size) => {
+                                    const isSelected = selectedSizes.includes(size);
+                                    return ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => toggleSize(size), "data-preview-static": "filter-size-btn", className: `rounded-lg py-2 text-xs font-semibold transition-all border ${isSelected
+                                            ? 'border-white bg-white text-black'
+                                            : 'border-neutral-800 bg-neutral-800/50 text-neutral-300 hover:border-neutral-700'}`, children: size }, size));
+                                }) })] })), (0, jsx_runtime_1.jsx)("div", { className: "border-t border-neutral-800/80 pt-6", children: (0, jsx_runtime_1.jsxs)("label", { className: "flex items-center justify-between cursor-pointer group", "data-preview-static": "filter-instock-toggle", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-xs font-medium text-neutral-300 group-hover:text-white transition-colors", "data-preview-field-path": fieldPath('inStockLabel'), children: inStockLabel }), (0, jsx_runtime_1.jsx)("input", { type: "checkbox", checked: inStockOnly, onChange: toggleInStock, className: "h-4 w-4 rounded border-neutral-700 bg-neutral-800 text-emerald-500 accent-emerald-500 cursor-pointer" })] }) })] })] }));
+}
+exports.FilterSidebar = EditableFilterSidebar;

package/dist/cart/useCart.d.ts

@@ -0,0 +1,37 @@
+import React from 'react';
+export interface CartItem {
+    id: string;
+    name: string;
+    price: number;
+    originalPrice?: number;
+    image?: string;
+    size?: string;
+    color?: string;
+    quantity: number;
+    sku?: string;
+    metadata?: Record<string, unknown>;
+}
+export interface CartContextValue {
+    items: CartItem[];
+    isOpen: boolean;
+    totalCount: number;
+    subtotal: number;
+    openCart: () => void;
+    closeCart: () => void;
+    toggleCart: () => void;
+    addItem: (item: Omit<CartItem, 'quantity'> & {
+        quantity?: number;
+    }) => void;
+    removeItem: (id: string, size?: string, color?: string) => void;
+    updateQuantity: (id: string, quantity: number, size?: string, color?: string) => void;
+    clearCart: () => void;
+    getWhatsAppOrderUrl: (whatsappNumber: string, options?: {
+        storeName?: string;
+        currency?: string;
+    }) => string;
+}
+export declare function CartProvider({ children, storageKey, }: {
+    children: React.ReactNode;
+    storageKey?: string;
+}): React.JSX.Element;
+export declare function useCart(): CartContextValue;

package/dist/cart/useCart.js

@@ -0,0 +1,142 @@
+"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CartProvider = CartProvider;
+exports.useCart = useCart;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const CartContext = (0, react_1.createContext)(null);
+const STORAGE_KEY = 'deneb_cart_items_v1';
+function CartProvider({ children, storageKey = STORAGE_KEY, }) {
+    const [items, setItems] = (0, react_1.useState)([]);
+    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
+    const [hasHydrated, setHasHydrated] = (0, react_1.useState)(false);
+    // Safely hydrate from localStorage after client mount
+    (0, react_1.useEffect)(() => {
+        try {
+            const stored = localStorage.getItem(storageKey);
+            if (stored) {
+                const parsed = JSON.parse(stored);
+                if (Array.isArray(parsed)) {
+                    setItems(parsed);
+                }
+            }
+        }
+        catch {
+            // Ignore localStorage errors (e.g. private browsing)
+        }
+        setHasHydrated(true);
+    }, [storageKey]);
+    // Persist items to localStorage on change (after initial mount)
+    (0, react_1.useEffect)(() => {
+        if (!hasHydrated)
+            return;
+        try {
+            localStorage.setItem(storageKey, JSON.stringify(items));
+        }
+        catch {
+            // Ignore quota exceeded
+        }
+    }, [items, hasHydrated, storageKey]);
+    const openCart = (0, react_1.useCallback)(() => setIsOpen(true), []);
+    const closeCart = (0, react_1.useCallback)(() => setIsOpen(false), []);
+    const toggleCart = (0, react_1.useCallback)(() => setIsOpen((prev) => !prev), []);
+    const getItemKey = (id, size, color) => `${id}-${size || ''}-${color || ''}`;
+    const addItem = (0, react_1.useCallback)((newItem) => {
+        const qty = newItem.quantity && newItem.quantity > 0 ? newItem.quantity : 1;
+        setItems((prevItems) => {
+            const targetKey = getItemKey(newItem.id, newItem.size, newItem.color);
+            const existingIndex = prevItems.findIndex((item) => getItemKey(item.id, item.size, item.color) === targetKey);
+            if (existingIndex > -1) {
+                const copy = [...prevItems];
+                copy[existingIndex] = {
+                    ...copy[existingIndex],
+                    quantity: copy[existingIndex].quantity + qty,
+                };
+                return copy;
+            }
+            return [...prevItems, { ...newItem, quantity: qty }];
+        });
+        setIsOpen(true);
+    }, []);
+    const removeItem = (0, react_1.useCallback)((id, size, color) => {
+        const targetKey = getItemKey(id, size, color);
+        setItems((prev) => prev.filter((item) => getItemKey(item.id, item.size, item.color) !== targetKey));
+    }, []);
+    const updateQuantity = (0, react_1.useCallback)((id, quantity, size, color) => {
+        const targetKey = getItemKey(id, size, color);
+        setItems((prev) => {
+            if (quantity <= 0) {
+                return prev.filter((item) => getItemKey(item.id, item.size, item.color) !== targetKey);
+            }
+            return prev.map((item) => getItemKey(item.id, item.size, item.color) === targetKey
+                ? { ...item, quantity }
+                : item);
+        });
+    }, []);
+    const clearCart = (0, react_1.useCallback)(() => setItems([]), []);
+    const totalCount = (0, react_1.useMemo)(() => items.reduce((acc, item) => acc + item.quantity, 0), [items]);
+    const subtotal = (0, react_1.useMemo)(() => items.reduce((acc, item) => acc + item.price * item.quantity, 0), [items]);
+    const getWhatsAppOrderUrl = (0, react_1.useCallback)((whatsappNumber, options) => {
+        const cleanNumber = whatsappNumber.replace(/\D/g, '');
+        const currency = options?.currency || '$';
+        const store = options?.storeName ? ` at *${options.storeName}*` : '';
+        const lines = [
+            `*New Order Request${store}*`,
+            `Date: ${new Date().toLocaleDateString()}`,
+            '',
+            '*Order Items:*',
+        ];
+        items.forEach((item, index) => {
+            const variantParts = [];
+            if (item.size)
+                variantParts.push(`Size: ${item.size}`);
+            if (item.color)
+                variantParts.push(`Color: ${item.color}`);
+            const variantStr = variantParts.length > 0 ? ` (${variantParts.join(', ')})` : '';
+            lines.push(`${index + 1}. *${item.name}*${variantStr}`);
+            lines.push(`   Qty: ${item.quantity} x ${currency}${item.price.toFixed(2)} = *${currency}${(item.price * item.quantity).toFixed(2)}*`);
+        });
+        lines.push('');
+        lines.push(`*Total Amount: ${currency}${subtotal.toFixed(2)}*`);
+        lines.push(`Total Items: ${totalCount}`);
+        lines.push('');
+        lines.push('Please confirm availability and delivery details. Thank you!');
+        return `https://wa.me/${cleanNumber}?text=${encodeURIComponent(lines.join('\n'))}`;
+    }, [items, subtotal, totalCount]);
+    const value = (0, react_1.useMemo)(() => ({
+        items,
+        isOpen,
+        totalCount,
+        subtotal,
+        openCart,
+        closeCart,
+        toggleCart,
+        addItem,
+        removeItem,
+        updateQuantity,
+        clearCart,
+        getWhatsAppOrderUrl,
+    }), [
+        items,
+        isOpen,
+        totalCount,
+        subtotal,
+        openCart,
+        closeCart,
+        toggleCart,
+        addItem,
+        removeItem,
+        updateQuantity,
+        clearCart,
+        getWhatsAppOrderUrl,
+    ]);
+    return (0, jsx_runtime_1.jsx)(CartContext.Provider, { value: value, children: children });
+}
+function useCart() {
+    const context = (0, react_1.useContext)(CartContext);
+    if (!context) {
+        throw new Error('useCart must be used within a <CartProvider>');
+    }
+    return context;
+}

package/dist/index.d.ts

@@ -28,7 +28,9 @@ export * from './StickyMobileBar';
 export * from './TrustBadges';
 export * from './ProductQuickView';
 export * from './CookieConsentBanner';
-export * from './ThemeStyles';
+export * from './cart/useCart';
+export * from './EditableCartDrawer';
+export * from './EditableFilterSidebar';
 export * from './SiteDataProvider';
 export * from './utils';
 export * from './core';
@@ -68,6 +70,8 @@ export { TrustBadges } from './TrustBadges';
 export { ProductQuickView } from './ProductQuickView';
 export { CookieConsentBanner } from './CookieConsentBanner';
 export { FloatingContactWidget } from './contact/FloatingContactWidget';
+export { EditableCartDrawer as CartDrawer } from './EditableCartDrawer';
+export { EditableFilterSidebar as FilterSidebar } from './EditableFilterSidebar';
 /**
  * DENEB UI Framework Metadata
  * Developed by Chamika Gayashan & Induranga Kawishwara

package/dist/index.js

@@ -18,7 +18,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DENEB_AUTHOR = exports.DENEB_FRAMEWORK_VERSION = exports.DENEB_FRAMEWORK_NAME = exports.FloatingContactWidget = exports.CookieConsentBanner = exports.ProductQuickView = exports.TrustBadges = exports.StickyMobileBar = exports.CategoryPills = exports.AnnouncementBar = exports.HeroSplit = exports.Hero = exports.Footer = exports.Header = exports.Navbar = exports.ContactForm = exports.FAQ = exports.Accordion = exports.TestimonialCard = exports.PricingCard = exports.ServiceCard = exports.CustomerReviews = exports.ProductDetail = exports.ProductGrid = exports.ProductCard = exports.List = exports.Box = exports.Section = exports.Grid = exports.Image = exports.Quote = exports.Badge = exports.Paragraph = exports.Heading = exports.Text = exports.Dialog = exports.Card = exports.Button = void 0;
+exports.DENEB_AUTHOR = exports.DENEB_FRAMEWORK_VERSION = exports.DENEB_FRAMEWORK_NAME = exports.FilterSidebar = exports.CartDrawer = exports.FloatingContactWidget = exports.CookieConsentBanner = exports.ProductQuickView = exports.TrustBadges = exports.StickyMobileBar = exports.CategoryPills = exports.AnnouncementBar = exports.HeroSplit = exports.Hero = exports.Footer = exports.Header = exports.Navbar = exports.ContactForm = exports.FAQ = exports.Accordion = exports.TestimonialCard = exports.PricingCard = exports.ServiceCard = exports.CustomerReviews = exports.ProductDetail = exports.ProductGrid = exports.ProductCard = exports.List = exports.Box = exports.Section = exports.Grid = exports.Image = exports.Quote = exports.Badge = exports.Paragraph = exports.Heading = exports.Text = exports.Dialog = exports.Card = exports.Button = void 0;
 __exportStar(require("./EditableText"), exports);
 __exportStar(require("./EditableImage"), exports);
 __exportStar(require("./EditableList"), exports);
@@ -45,7 +45,9 @@ __exportStar(require("./StickyMobileBar"), exports);
 __exportStar(require("./TrustBadges"), exports);
 __exportStar(require("./ProductQuickView"), exports);
 __exportStar(require("./CookieConsentBanner"), exports);
-__exportStar(require("./ThemeStyles"), exports);
+__exportStar(require("./cart/useCart"), exports);
+__exportStar(require("./EditableCartDrawer"), exports);
+__exportStar(require("./EditableFilterSidebar"), exports);
 __exportStar(require("./SiteDataProvider"), exports);
 // Smart template components & actions
 __exportStar(require("./utils"), exports);
@@ -122,6 +124,10 @@ var CookieConsentBanner_1 = require("./CookieConsentBanner");
 Object.defineProperty(exports, "CookieConsentBanner", { enumerable: true, get: function () { return CookieConsentBanner_1.CookieConsentBanner; } });
 var FloatingContactWidget_1 = require("./contact/FloatingContactWidget");
 Object.defineProperty(exports, "FloatingContactWidget", { enumerable: true, get: function () { return FloatingContactWidget_1.FloatingContactWidget; } });
+var EditableCartDrawer_1 = require("./EditableCartDrawer");
+Object.defineProperty(exports, "CartDrawer", { enumerable: true, get: function () { return EditableCartDrawer_1.EditableCartDrawer; } });
+var EditableFilterSidebar_1 = require("./EditableFilterSidebar");
+Object.defineProperty(exports, "FilterSidebar", { enumerable: true, get: function () { return EditableFilterSidebar_1.EditableFilterSidebar; } });
 /**
  * DENEB UI Framework Metadata
  * Developed by Chamika Gayashan & Induranga Kawishwara

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deneb-ui/ui",
-  "version": "2.0.20",
+  "version": "2.0.21",
   "description": "DENEB UI - The premier visual-first React component framework for the modern web. Created by Chamika Gayashan & Induranga Kawishwara.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",