@deneb-ui/ui 2.0.6 → 2.0.8

package/README.md

@@ -4,9 +4,9 @@
 
 > **DENEB UI — Build beautiful interfaces, effortlessly.**  
 > The premier visual-first React component ecosystem.  
-> Created by **Chamika Gayashan & Induranga Kawishwara**.
+> Proudly presented by **DENEB-UI Collaborate with FIVORA**.
 
-[![Framework: DENEB UI](https://img.shields.io/badge/Framework-DENEB_UI_v2.0-blue.svg)](https://github.com/chamikathereal)
+[![Framework: DENEB UI](https://img.shields.io/badge/Framework-DENEB_UI_v2.0-blue.svg)](https://github.com/deneb-ui/ui)
 [![License: MIT](https://img.shields.io/badge/License-MIT-orange.svg)](https://opensource.org/licenses/MIT)
 
 ---

package/dist/CookieConsentBanner.d.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+export interface CookieConsentBannerProps {
+    fieldPath?: string;
+    title?: string;
+    message?: string;
+    privacyPolicyUrl?: string;
+    privacyPolicyLabel?: string;
+    acceptLabel?: string;
+    declineLabel?: string;
+    position?: 'bottom' | 'bottom-left' | 'bottom-right';
+    storageKey?: string;
+    onAccept?: () => void;
+    onDecline?: () => void;
+    className?: string;
+    style?: React.CSSProperties;
+}
+/**
+ * DENEB UI — Cookie & Privacy Consent Banner
+ *
+ * GDPR / ePrivacy compliant cookie banner with smooth animation,
+ * local storage persistence, and live visual customization.
+ *
+ * Features:
+ * - Persistent consent state in localStorage (`deneb_cookie_consent`)
+ * - Non-intrusive modern floating dock design
+ * - Configurable position (bottom, bottom-left, bottom-right)
+ * - Accessible keyboard focus management
+ *
+ * Created by Chamika Gayashan & Induranga Kawishwara
+ */
+export declare function CookieConsentBanner({ fieldPath, title, message, privacyPolicyUrl, privacyPolicyLabel, acceptLabel, declineLabel, position, storageKey, onAccept, onDecline, className, style, }: CookieConsentBannerProps): React.JSX.Element | null;

package/dist/CookieConsentBanner.js

@@ -0,0 +1,77 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CookieConsentBanner = CookieConsentBanner;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+/**
+ * DENEB UI — Cookie & Privacy Consent Banner
+ *
+ * GDPR / ePrivacy compliant cookie banner with smooth animation,
+ * local storage persistence, and live visual customization.
+ *
+ * Features:
+ * - Persistent consent state in localStorage (`deneb_cookie_consent`)
+ * - Non-intrusive modern floating dock design
+ * - Configurable position (bottom, bottom-left, bottom-right)
+ * - Accessible keyboard focus management
+ *
+ * Created by Chamika Gayashan & Induranga Kawishwara
+ */
+function CookieConsentBanner({ fieldPath = 'site.cookieConsent', title = 'We Value Your Privacy', message = 'We use cookies and similar technologies to enhance your browsing experience, serve personalized content, and analyze our traffic. By clicking "Accept All", you consent to our use of cookies.', privacyPolicyUrl = '/privacy', privacyPolicyLabel = 'Privacy Policy', acceptLabel = 'Accept All', declineLabel = 'Decline Non-Essential', position = 'bottom-right', storageKey = 'deneb_cookie_consent', onAccept, onDecline, className = '', style = {}, }) {
+    const [isVisible, setIsVisible] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        try {
+            const stored = localStorage.getItem(storageKey);
+            if (!stored) {
+                // Delay slightly for smooth entrance
+                const timer = setTimeout(() => setIsVisible(true), 800);
+                return () => clearTimeout(timer);
+            }
+        }
+        catch {
+            // localStorage may be blocked in some sandboxes
+            setIsVisible(true);
+        }
+    }, [storageKey]);
+    const handleAccept = () => {
+        try {
+            localStorage.setItem(storageKey, 'accepted');
+        }
+        catch {
+            // ignore
+        }
+        setIsVisible(false);
+        if (onAccept)
+            onAccept();
+    };
+    const handleDecline = () => {
+        try {
+            localStorage.setItem(storageKey, 'declined');
+        }
+        catch {
+            // ignore
+        }
+        setIsVisible(false);
+        if (onDecline)
+            onDecline();
+    };
+    if (!isVisible) {
+        return null;
+    }
+    const getPositionClasses = () => {
+        switch (position) {
+            case 'bottom':
+                return 'bottom-0 left-0 right-0 p-4 sm:p-6';
+            case 'bottom-left':
+                return 'bottom-4 left-4 sm:bottom-6 sm:left-6 max-w-md';
+            case 'bottom-right':
+            default:
+                return 'bottom-4 right-4 sm:bottom-6 sm:right-6 max-w-md';
+        }
+    };
+    return ((0, jsx_runtime_1.jsx)("aside", { role: "region", "aria-label": "Cookie consent banner", className: `fixed z-50 transition-all duration-300 ${getPositionClasses()} ${className}`, "data-preview-field-path": fieldPath, style: style, children: (0, jsx_runtime_1.jsxs)("div", { className: "relative overflow-hidden rounded-3xl p-6 bg-white/95 backdrop-blur-md border border-slate-200/80 shadow-2xl", style: {
+                boxShadow: '0 20px 40px -15px rgba(0, 0, 0, 0.15)',
+            }, children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-start gap-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex-shrink-0 p-2.5 rounded-2xl bg-amber-50 border border-amber-100/60 text-amber-600", children: (0, jsx_runtime_1.jsx)("svg", { className: "w-6 h-6", fill: "currentColor", viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10c0-.34-.02-.67-.06-1-.73.57-1.64.91-2.63.91-2.4 0-4.34-1.94-4.34-4.34 0-.99.34-1.9.91-2.63-.33-.04-.66-.06-1-.06-1.15 0-2.22.39-3.08 1.05-.62-.83-.92-1.89-.92-3.05 0-.4.04-.79.11-1.17C12.67 2.04 12.34 2 12 2zm-3 8a1.5 1.5 0 100 3 1.5 1.5 0 000-3zm6 4a1.5 1.5 0 100 3 1.5 1.5 0 000-3zm-4 4a1.5 1.5 0 100 3 1.5 1.5 0 000-3z" }) }) }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h4", { className: "text-base font-bold text-slate-900 leading-tight", children: title }), (0, jsx_runtime_1.jsxs)("p", { className: "mt-2 text-xs sm:text-sm text-slate-600 leading-relaxed", children: [message, ' ', privacyPolicyUrl && ((0, jsx_runtime_1.jsx)("a", { href: privacyPolicyUrl, className: "font-medium text-slate-900 underline underline-offset-2 hover:text-primary transition-colors", children: privacyPolicyLabel }))] })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "mt-5 flex flex-wrap items-center justify-end gap-3 pt-4 border-t border-slate-100", children: [(0, jsx_runtime_1.jsx)("button", { type: "button", onClick: handleDecline, className: "px-4 py-2 rounded-xl text-xs sm:text-sm font-semibold text-slate-600 hover:text-slate-900 hover:bg-slate-100 border border-transparent transition-all", children: declineLabel }), (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: handleAccept, className: "px-5 py-2.5 rounded-xl text-xs sm:text-sm font-bold text-white shadow-md transition-all duration-200 active:scale-95 hover:brightness-110", style: {
+                                backgroundColor: 'var(--color-primary, #0f172a)',
+                            }, children: acceptLabel })] })] }) }));
+}

package/dist/ProductQuickView.d.ts

@@ -0,0 +1,37 @@
+import React from 'react';
+export interface ProductQuickViewItem {
+    id: string;
+    title: string;
+    price: string | number;
+    originalPrice?: string | number;
+    currency?: string;
+    badge?: string;
+    description?: string;
+    imageUrl?: string;
+    gallery?: string[];
+    inStock?: boolean;
+    rating?: number;
+    reviewCount?: number;
+}
+export interface ProductQuickViewProps {
+    product: ProductQuickViewItem | null;
+    isOpen: boolean;
+    onClose: () => void;
+    onAddToCart?: (product: ProductQuickViewItem, quantity: number) => void;
+    className?: string;
+}
+/**
+ * DENEB UI — Product Quick View Modal
+ *
+ * High-converting instant lightbox inspection modal for products.
+ * Enables shoppers to inspect details and buy without leaving page flow.
+ *
+ * Features:
+ * - Image gallery thumbnail preview
+ * - Live quantity counter with bounds protection
+ * - Accessible keyboard interaction (Esc key to close)
+ * - Backdrop blur with smooth animation
+ *
+ * Created by Chamika Gayashan & Induranga Kawishwara
+ */
+export declare function ProductQuickView({ product, isOpen, onClose, onAddToCart, className, }: ProductQuickViewProps): React.JSX.Element | null;

package/dist/ProductQuickView.js

@@ -0,0 +1,63 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProductQuickView = ProductQuickView;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+/**
+ * DENEB UI — Product Quick View Modal
+ *
+ * High-converting instant lightbox inspection modal for products.
+ * Enables shoppers to inspect details and buy without leaving page flow.
+ *
+ * Features:
+ * - Image gallery thumbnail preview
+ * - Live quantity counter with bounds protection
+ * - Accessible keyboard interaction (Esc key to close)
+ * - Backdrop blur with smooth animation
+ *
+ * Created by Chamika Gayashan & Induranga Kawishwara
+ */
+function ProductQuickView({ product, isOpen, onClose, onAddToCart, className = '', }) {
+    const [quantity, setQuantity] = (0, react_1.useState)(1);
+    const [selectedImage, setSelectedImage] = (0, react_1.useState)('');
+    (0, react_1.useEffect)(() => {
+        if (product) {
+            setQuantity(1);
+            setSelectedImage(product.imageUrl || (product.gallery && product.gallery[0]) || '');
+        }
+    }, [product]);
+    // Handle ESC key to close
+    (0, react_1.useEffect)(() => {
+        const handleKeyDown = (e) => {
+            if (e.key === 'Escape' && isOpen) {
+                onClose();
+            }
+        };
+        if (isOpen) {
+            window.addEventListener('keydown', handleKeyDown);
+            document.body.style.overflow = 'hidden';
+        }
+        return () => {
+            window.removeEventListener('keydown', handleKeyDown);
+            document.body.style.overflow = 'unset';
+        };
+    }, [isOpen, onClose]);
+    if (!isOpen || !product) {
+        return null;
+    }
+    const images = product.gallery && product.gallery.length > 0 ? product.gallery : [product.imageUrl || ''];
+    const currency = product.currency || '$';
+    const handleAddToCart = () => {
+        if (onAddToCart) {
+            onAddToCart(product, quantity);
+        }
+        onClose();
+    };
+    return ((0, jsx_runtime_1.jsx)("div", { role: "dialog", "aria-modal": "true", className: `fixed inset-0 z-50 flex items-center justify-center p-4 sm:p-6 bg-black/60 backdrop-blur-sm transition-opacity duration-200 ${className}`, onClick: (e) => {
+            if (e.target === e.currentTarget)
+                onClose();
+        }, children: (0, jsx_runtime_1.jsxs)("div", { className: "relative w-full max-w-2xl overflow-hidden rounded-3xl bg-white shadow-2xl border border-slate-100 flex flex-col md:flex-row max-h-[90vh]", children: [(0, jsx_runtime_1.jsx)("button", { type: "button", onClick: onClose, className: "absolute top-4 right-4 z-10 p-2 text-slate-400 hover:text-slate-700 bg-white/80 hover:bg-white rounded-full shadow-sm backdrop-blur transition-colors", "aria-label": "Close modal", children: (0, jsx_runtime_1.jsx)("svg", { className: "w-5 h-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" }) }) }), (0, jsx_runtime_1.jsxs)("div", { className: "md:w-1/2 p-6 flex flex-col items-center justify-center bg-slate-50 border-b md:border-b-0 md:border-r border-slate-100", children: [(0, jsx_runtime_1.jsxs)("div", { className: "relative w-full aspect-square rounded-2xl overflow-hidden bg-white shadow-sm flex items-center justify-center", children: [product.badge && ((0, jsx_runtime_1.jsx)("span", { className: "absolute top-3 left-3 px-2.5 py-1 text-xs font-bold text-white bg-red-500 rounded-lg shadow-sm", children: product.badge })), selectedImage ? ((0, jsx_runtime_1.jsx)("img", { src: selectedImage, alt: product.title, className: "w-full h-full object-cover" })) : ((0, jsx_runtime_1.jsx)("div", { className: "text-slate-300 text-sm", children: "No image available" }))] }), images.length > 1 && ((0, jsx_runtime_1.jsx)("div", { className: "flex gap-2 mt-4 overflow-x-auto max-w-full pb-1", children: images.map((img, idx) => ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => setSelectedImage(img), className: `w-12 h-12 rounded-lg overflow-hidden border-2 transition-all flex-shrink-0 ${selectedImage === img ? 'border-primary shadow-sm' : 'border-slate-200 opacity-60 hover:opacity-100'}`, children: (0, jsx_runtime_1.jsx)("img", { src: img, alt: "", className: "w-full h-full object-cover" }) }, idx))) }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "md:w-1/2 p-6 flex flex-col justify-between overflow-y-auto", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2 mb-2", children: [(0, jsx_runtime_1.jsx)("span", { className: `inline-flex items-center px-2 py-0.5 rounded text-xs font-semibold ${product.inStock !== false ? 'bg-emerald-50 text-emerald-700' : 'bg-rose-50 text-rose-700'}`, children: product.inStock !== false ? 'In Stock' : 'Out of Stock' }), product.rating && ((0, jsx_runtime_1.jsxs)("span", { className: "text-xs text-amber-500 flex items-center gap-1 font-medium", children: ["\u2605 ", product.rating, " ", product.reviewCount ? `(${product.reviewCount})` : ''] }))] }), (0, jsx_runtime_1.jsx)("h3", { className: "text-xl font-bold text-slate-900 leading-tight", children: product.title }), (0, jsx_runtime_1.jsxs)("div", { className: "mt-3 flex items-baseline gap-2", children: [(0, jsx_runtime_1.jsxs)("span", { className: "text-2xl font-black text-slate-900", children: [currency, product.price] }), product.originalPrice && ((0, jsx_runtime_1.jsxs)("span", { className: "text-sm font-semibold text-slate-400 line-through", children: [currency, product.originalPrice] }))] }), product.description && ((0, jsx_runtime_1.jsx)("p", { className: "mt-4 text-sm text-slate-600 leading-relaxed", children: product.description }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "mt-6 pt-6 border-t border-slate-100", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between mb-4", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-sm font-medium text-slate-700", children: "Quantity" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center rounded-xl border border-slate-200 bg-slate-50 p-1", children: [(0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => setQuantity((q) => Math.max(1, q - 1)), className: "w-8 h-8 flex items-center justify-center rounded-lg hover:bg-white text-slate-600 font-bold transition-colors", children: "-" }), (0, jsx_runtime_1.jsx)("span", { className: "w-10 text-center font-bold text-sm text-slate-800", children: quantity }), (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => setQuantity((q) => q + 1), className: "w-8 h-8 flex items-center justify-center rounded-lg hover:bg-white text-slate-600 font-bold transition-colors", children: "+" })] })] }), (0, jsx_runtime_1.jsxs)("button", { type: "button", disabled: product.inStock === false, onClick: handleAddToCart, className: "w-full py-3.5 px-4 rounded-xl font-bold text-sm text-white shadow-lg transition-all duration-200 active:scale-98 disabled:opacity-50 disabled:cursor-not-allowed hover:brightness-110 flex items-center justify-center gap-2", style: {
+                                        backgroundColor: 'var(--color-primary, #0f172a)',
+                                        boxShadow: '0 4px 14px rgba(15, 23, 42, 0.25)',
+                                    }, children: [(0, jsx_runtime_1.jsx)("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" }) }), "Add to Cart"] })] })] })] }) }));
+}

package/dist/StickyMobileBar.d.ts

@@ -0,0 +1,38 @@
+import React from 'react';
+export interface StickyMobileBarAction {
+    id: string;
+    label: string;
+    href: string;
+    icon?: 'phone' | 'whatsapp' | 'cart' | 'message' | 'shop' | 'custom';
+    customIcon?: React.ReactNode;
+    isPrimary?: boolean;
+    onClick?: () => void;
+    badge?: string | number;
+}
+export interface StickyMobileBarProps {
+    fieldPath?: string;
+    actions?: StickyMobileBarAction[];
+    showOnDesktop?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+    phone?: string;
+    whatsapp?: string;
+    primaryActionLabel?: string;
+    primaryActionHref?: string;
+    onPrimaryAction?: () => void;
+}
+/**
+ * DENEB UI — Sticky Mobile Commerce Action Bar
+ *
+ * High-converting persistent bottom action dock for mobile shoppers.
+ * Provides instant 1-tap Call, WhatsApp, and Buy/Checkout access.
+ *
+ * Features:
+ * - Automatically pulls store phone & WhatsApp from SiteData
+ * - Responsive: docks fixed at bottom on mobile (lg:hidden by default)
+ * - Ultra-crisp inline SVG icons (zero external icon library dependencies)
+ * - Glassmorphism backdrop blur with high contrast touch targets
+ *
+ * Created by Chamika Gayashan & Induranga Kawishwara
+ */
+export declare function StickyMobileBar({ fieldPath, actions, showOnDesktop, className, style, phone: propPhone, whatsapp: propWhatsapp, primaryActionLabel, primaryActionHref, onPrimaryAction, }: StickyMobileBarProps): React.JSX.Element;

package/dist/StickyMobileBar.js

@@ -0,0 +1,91 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StickyMobileBar = StickyMobileBar;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const SiteDataProvider_1 = require("./SiteDataProvider");
+/**
+ * DENEB UI — Sticky Mobile Commerce Action Bar
+ *
+ * High-converting persistent bottom action dock for mobile shoppers.
+ * Provides instant 1-tap Call, WhatsApp, and Buy/Checkout access.
+ *
+ * Features:
+ * - Automatically pulls store phone & WhatsApp from SiteData
+ * - Responsive: docks fixed at bottom on mobile (lg:hidden by default)
+ * - Ultra-crisp inline SVG icons (zero external icon library dependencies)
+ * - Glassmorphism backdrop blur with high contrast touch targets
+ *
+ * Created by Chamika Gayashan & Induranga Kawishwara
+ */
+function StickyMobileBar({ fieldPath, actions, showOnDesktop = false, className = '', style = {}, phone: propPhone, whatsapp: propWhatsapp, primaryActionLabel = 'Shop Now', primaryActionHref = '#products', onPrimaryAction, }) {
+    const { siteData } = (0, SiteDataProvider_1.useSiteData)();
+    // Resolve merchant contacts from siteData if not explicitly provided
+    const merchant = siteData?.merchant || {};
+    const phone = propPhone || merchant.phone || merchant.supportPhone || '';
+    const whatsapp = propWhatsapp || merchant.whatsapp || merchant.phone || '';
+    // Default action buttons if custom actions array is not provided
+    const resolvedActions = actions || [
+        ...(phone
+            ? [
+                {
+                    id: 'call',
+                    label: 'Call Us',
+                    href: `tel:${phone.replace(/[^0-9+]/g, '')}`,
+                    icon: 'phone',
+                },
+            ]
+            : []),
+        ...(whatsapp
+            ? [
+                {
+                    id: 'whatsapp',
+                    label: 'WhatsApp',
+                    href: `https://wa.me/${whatsapp.replace(/[^0-9]/g, '')}?text=${encodeURIComponent('Hello! I would like to inquire about your products.')}`,
+                    icon: 'whatsapp',
+                },
+            ]
+            : []),
+        {
+            id: 'primary',
+            label: primaryActionLabel,
+            href: primaryActionHref,
+            isPrimary: true,
+            onClick: onPrimaryAction,
+            icon: 'cart',
+        },
+    ];
+    const renderIcon = (icon, custom) => {
+        if (custom)
+            return custom;
+        switch (icon) {
+            case 'phone':
+                return ((0, jsx_runtime_1.jsx)("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" }) }));
+            case 'whatsapp':
+                return ((0, jsx_runtime_1.jsx)("svg", { className: "w-5 h-5", fill: "currentColor", 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.669-.699c.969.54 1.772.82 2.791.82 3.183 0 5.769-2.587 5.769-5.767.001-3.182-2.584-5.765-5.769-5.765zm0 10.375c-.947 0-1.874-.255-2.684-.736l-.192-.114-1.992.522.532-1.942-.125-.199a4.618 4.618 0 01-.707-2.473c.001-2.548 2.073-4.62 4.622-4.62 2.549 0 4.622 2.072 4.622 4.62 0 2.549-2.073 4.62-4.622 4.62z" }) }));
+            case 'cart':
+                return ((0, jsx_runtime_1.jsx)("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" }) }));
+            case 'shop':
+                return ((0, jsx_runtime_1.jsx)("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" }) }));
+            default:
+                return ((0, jsx_runtime_1.jsx)("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M13 10V3L4 14h7v7l9-11h-7z" }) }));
+        }
+    };
+    return ((0, jsx_runtime_1.jsx)("aside", { className: `fixed bottom-0 left-0 right-0 z-50 p-2 sm:p-3 transition-transform duration-300 ${showOnDesktop ? 'block' : 'lg:hidden'} ${className}`, "data-preview-field-path": fieldPath, style: {
+            backgroundColor: 'rgba(255, 255, 255, 0.92)',
+            backdropFilter: 'blur(12px)',
+            WebkitBackdropFilter: 'blur(12px)',
+            borderTop: '1px solid rgba(226, 232, 240, 0.8)',
+            boxShadow: '0 -4px 20px rgba(0, 0, 0, 0.08)',
+            ...style,
+        }, children: (0, jsx_runtime_1.jsx)("div", { className: "max-w-md mx-auto flex items-center justify-between gap-2", children: resolvedActions.map((action) => {
+                const isPrimary = action.isPrimary;
+                return ((0, jsx_runtime_1.jsxs)("a", { href: action.href, onClick: action.onClick, className: `relative flex items-center justify-center gap-2 rounded-xl text-sm font-semibold transition-all duration-200 active:scale-95 ${isPrimary
+                        ? 'flex-1 py-3 px-4 text-white shadow-md hover:brightness-110'
+                        : 'py-2.5 px-3 text-slate-700 bg-slate-100 hover:bg-slate-200 border border-slate-200/60'}`, style: isPrimary
+                        ? {
+                            backgroundColor: 'var(--color-primary, #0f172a)',
+                            boxShadow: '0 4px 12px rgba(15, 23, 42, 0.25)',
+                        }
+                        : {}, children: [action.badge && ((0, jsx_runtime_1.jsx)("span", { className: "absolute -top-1.5 -right-1.5 px-1.5 py-0.5 text-[10px] font-bold text-white bg-red-500 rounded-full", children: action.badge })), renderIcon(action.icon, action.customIcon), (0, jsx_runtime_1.jsx)("span", { className: "truncate", children: action.label })] }, action.id));
+            }) }) }));
+}

package/dist/TrustBadges.d.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+export interface TrustBadgeItem {
+    id: string;
+    title: string;
+    description: string;
+    icon?: 'shipping' | 'security' | 'guarantee' | 'support' | 'eco' | 'custom';
+    customIcon?: React.ReactNode;
+}
+export interface TrustBadgesProps {
+    fieldPath?: string;
+    title?: string;
+    subtitle?: string;
+    badges?: TrustBadgeItem[];
+    variant?: 'grid' | 'inline' | 'cards';
+    className?: string;
+    style?: React.CSSProperties;
+}
+/**
+ * DENEB UI — Trust & Guarantee Badges
+ *
+ * High-converting proof component for e-commerce checkouts and product pages.
+ * Increases conversion rates by answering buyer objections proactively.
+ *
+ * Features:
+ * - 4 built-in e-commerce assurance icons (Shipping, Security, Guarantee, Support)
+ * - 3 modern layout variants: 'grid', 'inline', and 'cards'
+ * - Responsive mobile to desktop grid layout
+ *
+ * Created by Chamika Gayashan & Induranga Kawishwara
+ */
+export declare function TrustBadges({ fieldPath, title, subtitle, badges, variant, className, style, }: TrustBadgesProps): React.JSX.Element;

package/dist/TrustBadges.js

@@ -0,0 +1,66 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TrustBadges = TrustBadges;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const DEFAULT_BADGES = [
+    {
+        id: 'shipping',
+        title: 'Fast & Free Delivery',
+        description: 'Complimentary shipping on orders over $50 with real-time tracking.',
+        icon: 'shipping',
+    },
+    {
+        id: 'security',
+        title: '100% Secure Checkout',
+        description: 'Bank-grade 256-bit SSL encryption. We protect your payment details.',
+        icon: 'security',
+    },
+    {
+        id: 'guarantee',
+        title: '30-Day Money Back',
+        description: 'Hassle-free 30-day return policy. Shop with complete peace of mind.',
+        icon: 'guarantee',
+    },
+    {
+        id: 'support',
+        title: '24/7 Expert Support',
+        description: 'Friendly, responsive customer care via Live Chat, WhatsApp, & Phone.',
+        icon: 'support',
+    },
+];
+/**
+ * DENEB UI — Trust & Guarantee Badges
+ *
+ * High-converting proof component for e-commerce checkouts and product pages.
+ * Increases conversion rates by answering buyer objections proactively.
+ *
+ * Features:
+ * - 4 built-in e-commerce assurance icons (Shipping, Security, Guarantee, Support)
+ * - 3 modern layout variants: 'grid', 'inline', and 'cards'
+ * - Responsive mobile to desktop grid layout
+ *
+ * Created by Chamika Gayashan & Induranga Kawishwara
+ */
+function TrustBadges({ fieldPath = 'content.trustBadges', title, subtitle, badges = DEFAULT_BADGES, variant = 'cards', className = '', style = {}, }) {
+    const renderIcon = (badge) => {
+        if (badge.customIcon)
+            return badge.customIcon;
+        switch (badge.icon) {
+            case 'shipping':
+                return ((0, jsx_runtime_1.jsx)("svg", { className: "w-6 h-6 text-emerald-600", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M13 16V6a1 1 0 00-1-1H4a1 1 0 00-1 1v10a1 1 0 001 1h1m8-1a1 1 0 01-1 1H9m4-1V8a1 1 0 011-1h2.586a1 1 0 01.707.293l3.414 3.414a1 1 0 01.293.707V16a1 1 0 01-1 1h-1m-6-1a1 1 0 001 1h1M5 17a2 2 0 104 0m-4 0a2 2 0 114 0m6 0a2 2 0 104 0m-4 0a2 2 0 114 0" }) }));
+            case 'security':
+                return ((0, jsx_runtime_1.jsx)("svg", { className: "w-6 h-6 text-indigo-600", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" }) }));
+            case 'guarantee':
+                return ((0, jsx_runtime_1.jsx)("svg", { className: "w-6 h-6 text-amber-600", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z" }) }));
+            case 'support':
+                return ((0, jsx_runtime_1.jsx)("svg", { className: "w-6 h-6 text-sky-600", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192l-3.536 3.536M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z" }) }));
+            default:
+                return ((0, jsx_runtime_1.jsx)("svg", { className: "w-6 h-6 text-slate-700", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }));
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)("section", { className: `w-full py-8 my-4 ${className}`, "data-preview-field-path": fieldPath, style: style, children: [(title || subtitle) && ((0, jsx_runtime_1.jsxs)("div", { className: "text-center mb-8", children: [title && ((0, jsx_runtime_1.jsx)("h3", { className: "text-xl sm:text-2xl font-bold tracking-tight text-slate-900", children: title })), subtitle && ((0, jsx_runtime_1.jsx)("p", { className: "mt-1 text-sm text-slate-600 max-w-xl mx-auto", children: subtitle }))] })), (0, jsx_runtime_1.jsx)("div", { className: variant === 'inline'
+                    ? 'flex flex-wrap items-center justify-around gap-6'
+                    : 'grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6', children: badges.map((badge) => ((0, jsx_runtime_1.jsxs)("div", { className: `flex items-start gap-4 p-5 rounded-2xl transition-all duration-200 hover:-translate-y-0.5 ${variant === 'cards'
+                        ? 'bg-white border border-slate-200/80 shadow-sm hover:shadow-md'
+                        : 'bg-transparent'}`, children: [(0, jsx_runtime_1.jsx)("div", { className: "flex-shrink-0 p-2.5 rounded-xl bg-slate-50 border border-slate-100 flex items-center justify-center", children: renderIcon(badge) }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h4", { className: "text-sm font-semibold text-slate-900 leading-tight", children: badge.title }), (0, jsx_runtime_1.jsx)("p", { className: "mt-1 text-xs text-slate-500 leading-relaxed", children: badge.description })] })] }, badge.id))) })] }));
+}

package/dist/index.d.ts

@@ -21,6 +21,10 @@ export * from './EditableHero';
 export * from './EditableDialog';
 export * from './EditableAnnouncementBar';
 export * from './EditableCategoryPills';
+export * from './StickyMobileBar';
+export * from './TrustBadges';
+export * from './ProductQuickView';
+export * from './CookieConsentBanner';
 export * from './ThemeStyles';
 export * from './SiteDataProvider';
 export * from './utils';
@@ -53,6 +57,10 @@ export { EditableFooter as Footer } from './EditableFooter';
 export { EditableHeroCentered as Hero, EditableHeroSplit as HeroSplit } from './EditableHero';
 export { EditableAnnouncementBar as AnnouncementBar } from './EditableAnnouncementBar';
 export { EditableCategoryPills as CategoryPills } from './EditableCategoryPills';
+export { StickyMobileBar } from './StickyMobileBar';
+export { TrustBadges } from './TrustBadges';
+export { ProductQuickView } from './ProductQuickView';
+export { CookieConsentBanner } from './CookieConsentBanner';
 export { FloatingContactWidget } from './contact/FloatingContactWidget';
 /**
  * DENEB UI Framework Metadata

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.CEEG_AUTHOR = exports.CEEG_FRAMEWORK_VERSION = exports.CEEG_FRAMEWORK_NAME = exports.DENEB_AUTHOR = exports.DENEB_FRAMEWORK_VERSION = exports.DENEB_FRAMEWORK_NAME = exports.FloatingContactWidget = 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.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.CEEG_AUTHOR = exports.CEEG_FRAMEWORK_VERSION = exports.CEEG_FRAMEWORK_NAME = 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.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);
@@ -38,6 +38,10 @@ __exportStar(require("./EditableHero"), exports);
 __exportStar(require("./EditableDialog"), exports);
 __exportStar(require("./EditableAnnouncementBar"), exports);
 __exportStar(require("./EditableCategoryPills"), exports);
+__exportStar(require("./StickyMobileBar"), exports);
+__exportStar(require("./TrustBadges"), exports);
+__exportStar(require("./ProductQuickView"), exports);
+__exportStar(require("./CookieConsentBanner"), exports);
 __exportStar(require("./ThemeStyles"), exports);
 __exportStar(require("./SiteDataProvider"), exports);
 // Smart template components & actions
@@ -99,6 +103,14 @@ var EditableAnnouncementBar_1 = require("./EditableAnnouncementBar");
 Object.defineProperty(exports, "AnnouncementBar", { enumerable: true, get: function () { return EditableAnnouncementBar_1.EditableAnnouncementBar; } });
 var EditableCategoryPills_1 = require("./EditableCategoryPills");
 Object.defineProperty(exports, "CategoryPills", { enumerable: true, get: function () { return EditableCategoryPills_1.EditableCategoryPills; } });
+var StickyMobileBar_1 = require("./StickyMobileBar");
+Object.defineProperty(exports, "StickyMobileBar", { enumerable: true, get: function () { return StickyMobileBar_1.StickyMobileBar; } });
+var TrustBadges_1 = require("./TrustBadges");
+Object.defineProperty(exports, "TrustBadges", { enumerable: true, get: function () { return TrustBadges_1.TrustBadges; } });
+var ProductQuickView_1 = require("./ProductQuickView");
+Object.defineProperty(exports, "ProductQuickView", { enumerable: true, get: function () { return ProductQuickView_1.ProductQuickView; } });
+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; } });
 /**

package/package.json

@@ -1,12 +1,21 @@
 {
   "name": "@deneb-ui/ui",
-  "version": "2.0.6",
+  "version": "2.0.8",
   "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",
   "publishConfig": {
     "access": "public"
   },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/deneb-ui/core.git",
+    "directory": "packages/deneb-ui"
+  },
+  "homepage": "https://github.com/deneb-ui/core#readme",
+  "bugs": {
+    "url": "https://github.com/deneb-ui/core/issues"
+  },
   "files": [
     "dist",
     "README.md"