@deneb-ui/ui 2.0.0 → 2.0.3

package/README.md

@@ -4,7 +4,7 @@
 
 > **DENEB UI — Build beautiful interfaces, effortlessly.**  
 > The premier visual-first React component ecosystem.  
-> Created by **Chamika Gayashan (CEE G)**.
+> Created by **Chamika Gayashan & Induranga Kawishwara**.
 
 [![Framework: DENEB UI](https://img.shields.io/badge/Framework-DENEB_UI_v2.0-blue.svg)](https://github.com/chamikathereal)
 [![License: MIT](https://img.shields.io/badge/License-MIT-orange.svg)](https://opensource.org/licenses/MIT)
@@ -178,5 +178,5 @@ export default function HomePage() {
 
 ## Author & Credits
 
-Created and architected by **Chamika Gayashan (CEE G)**.  
+Created and architected by **Chamika Gayashan & Induranga Kawishwara**.  
 Built for the global React and storefront developer ecosystem.

package/dist/EditableAnnouncementBar.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+export interface EditableAnnouncementBarProps {
+    fieldPath?: string;
+    defaultText?: string;
+    defaultBadge?: string;
+    defaultLinkText?: string;
+    defaultLinkUrl?: string;
+    dismissible?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+}
+/**
+ * DENEB UI — Visual-First Announcement Bar
+ *
+ * High-converting top promotional ribbon for store announcements,
+ * coupon codes, and limited-time offers.
+ *
+ * Features:
+ * - Live bidirectional Fivora editing bindings (`data-preview-field-path`)
+ * - Auto-resolves from site-data.json (`site.announcement` or custom path)
+ * - Dismissible button with clean client animation
+ * - Tailwind CSS + resilient inline styling fallbacks
+ *
+ * Created by Chamika Gayashan & Induranga Kawishwara
+ */
+export declare function EditableAnnouncementBar({ fieldPath, defaultText, defaultBadge, defaultLinkText, defaultLinkUrl, dismissible, className, style, }: EditableAnnouncementBarProps): React.JSX.Element | null;
+export declare const AnnouncementBar: typeof EditableAnnouncementBar;

package/dist/EditableAnnouncementBar.js

@@ -0,0 +1,92 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AnnouncementBar = void 0;
+exports.EditableAnnouncementBar = EditableAnnouncementBar;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const SiteDataProvider_1 = require("./SiteDataProvider");
+/**
+ * DENEB UI — Visual-First Announcement Bar
+ *
+ * High-converting top promotional ribbon for store announcements,
+ * coupon codes, and limited-time offers.
+ *
+ * Features:
+ * - Live bidirectional Fivora editing bindings (`data-preview-field-path`)
+ * - Auto-resolves from site-data.json (`site.announcement` or custom path)
+ * - Dismissible button with clean client animation
+ * - Tailwind CSS + resilient inline styling fallbacks
+ *
+ * Created by Chamika Gayashan & Induranga Kawishwara
+ */
+function EditableAnnouncementBar({ fieldPath = 'site.announcement', defaultText = 'Free worldwide shipping on all orders over $50 — Use code: DENEB10', defaultBadge = 'PROMO', defaultLinkText, defaultLinkUrl, dismissible = true, className = '', style = {}, }) {
+    const { siteData } = (0, SiteDataProvider_1.useSiteData)();
+    const [isDismissed, setIsDismissed] = (0, react_1.useState)(false);
+    // Resolve dynamic values from siteData if present
+    const announcementData = siteData?.site?.announcement;
+    const isEnabled = announcementData?.enabled !== false;
+    const text = announcementData?.text || defaultText;
+    const badge = announcementData?.badge || defaultBadge;
+    const linkText = announcementData?.linkText || defaultLinkText;
+    const linkUrl = announcementData?.linkUrl || defaultLinkUrl;
+    if (isDismissed || !isEnabled) {
+        return null;
+    }
+    const containerStyle = {
+        position: 'relative',
+        zIndex: 40,
+        backgroundColor: 'var(--color-primary, #0f172a)',
+        color: '#ffffff',
+        fontSize: '0.8125rem',
+        lineHeight: '1.25rem',
+        fontWeight: 500,
+        padding: '0.5rem 1rem',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        textAlign: 'center',
+        transition: 'all 0.2s ease',
+        ...style,
+    };
+    const badgeStyle = {
+        backgroundColor: 'rgba(255, 255, 255, 0.2)',
+        color: '#ffffff',
+        padding: '0.125rem 0.5rem',
+        borderRadius: '9999px',
+        fontSize: '0.6875rem',
+        fontWeight: 700,
+        letterSpacing: '0.05em',
+        textTransform: 'uppercase',
+        marginRight: '0.5rem',
+        display: 'inline-flex',
+        alignItems: 'center',
+    };
+    const linkStyle = {
+        marginLeft: '0.5rem',
+        textDecoration: 'underline',
+        fontWeight: 600,
+        color: '#ffffff',
+        display: 'inline-flex',
+        alignItems: 'center',
+    };
+    const closeButtonStyle = {
+        position: 'absolute',
+        right: '0.75rem',
+        top: '50%',
+        transform: 'translateY(-50%)',
+        background: 'none',
+        border: 'none',
+        color: 'rgba(255, 255, 255, 0.7)',
+        cursor: 'pointer',
+        padding: '0.25rem',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderRadius: '0.25rem',
+        transition: 'color 0.15s ease',
+    };
+    const hasDynamicField = Boolean(fieldPath && siteData?.site?.announcement);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: `deneb-announcement-bar relative z-40 bg-slate-900 text-white text-xs md:text-sm font-medium px-4 py-2 flex items-center justify-center text-center ${className}`, style: containerStyle, children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-center flex-wrap gap-1.5 max-w-7xl mx-auto pr-6", children: [badge && ((0, jsx_runtime_1.jsx)("span", { className: "deneb-announcement-badge bg-white/20 text-white px-2 py-0.5 rounded-full text-[10px] font-bold tracking-wider uppercase inline-flex items-center", style: badgeStyle, ...(hasDynamicField ? { 'data-preview-field-path': `${fieldPath}.badge` } : { 'data-preview-static': 'announcement-badge' }), children: badge })), (0, jsx_runtime_1.jsx)("span", { className: "deneb-announcement-text", ...(hasDynamicField ? { 'data-preview-field-path': `${fieldPath}.text` } : { 'data-preview-static': 'announcement-text' }), children: text }), linkText && linkUrl && ((0, jsx_runtime_1.jsxs)("a", { href: linkUrl, className: "deneb-announcement-link underline font-semibold text-white hover:opacity-90 transition-opacity ml-1 inline-flex items-center gap-1", style: linkStyle, ...(hasDynamicField ? { 'data-preview-field-path': `${fieldPath}.linkText` } : { 'data-preview-static': 'announcement-link' }), children: [linkText, " \u2192"] }))] }), dismissible && ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => setIsDismissed(true), style: closeButtonStyle, "aria-label": "Dismiss announcement", className: "hover:text-white transition-colors", "data-preview-static": "announcement-dismiss", children: (0, jsx_runtime_1.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [(0, jsx_runtime_1.jsx)("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), (0, jsx_runtime_1.jsx)("line", { x1: "6", y1: "6", x2: "18", y2: "18" })] }) }))] }));
+}
+// Canonical alias
+exports.AnnouncementBar = EditableAnnouncementBar;

package/dist/EditableCategoryPills.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+export interface EditableCategoryPillsProps {
+    categories?: string[];
+    fieldPath?: string;
+    selectedCategory?: string;
+    onSelectCategory?: (category: string) => void;
+    allLabel?: string;
+    className?: string;
+    style?: React.CSSProperties;
+}
+/**
+ * DENEB UI — Category Pills Filter Bar
+ *
+ * High-converting horizontal filter ribbon for catalog and shop pages.
+ * Supports live active tab switching, smooth horizontal scrolling,
+ * and visual editing annotations.
+ *
+ * Created by Chamika Gayashan & Induranga Kawishwara
+ */
+export declare function EditableCategoryPills({ categories, fieldPath, selectedCategory: controlledSelected, onSelectCategory, allLabel, className, style, }: EditableCategoryPillsProps): React.JSX.Element;
+export declare const CategoryPills: typeof EditableCategoryPills;

package/dist/EditableCategoryPills.js

@@ -0,0 +1,113 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CategoryPills = void 0;
+exports.EditableCategoryPills = EditableCategoryPills;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const SiteDataProvider_1 = require("./SiteDataProvider");
+const DEFAULT_CATEGORIES = ['All', 'Featured', 'New Arrivals', 'Best Sellers', 'Sale'];
+/**
+ * DENEB UI — Category Pills Filter Bar
+ *
+ * High-converting horizontal filter ribbon for catalog and shop pages.
+ * Supports live active tab switching, smooth horizontal scrolling,
+ * and visual editing annotations.
+ *
+ * Created by Chamika Gayashan & Induranga Kawishwara
+ */
+function EditableCategoryPills({ categories, fieldPath = 'categories', selectedCategory: controlledSelected, onSelectCategory, allLabel = 'All', className = '', style = {}, }) {
+    const { siteData } = (0, SiteDataProvider_1.useSiteData)();
+    const [internalSelected, setInternalSelected] = (0, react_1.useState)(allLabel);
+    const activeCategory = controlledSelected !== undefined ? controlledSelected : internalSelected;
+    // Resolve list of categories
+    const resolvedCategories = react_1.default.useMemo(() => {
+        if (categories && categories.length > 0) {
+            return categories.includes(allLabel) ? categories : [allLabel, ...categories];
+        }
+        const rawCategories = siteData?.categories;
+        if (Array.isArray(rawCategories) && rawCategories.length > 0) {
+            const cats = rawCategories.map((c) => (typeof c === 'string' ? c : c.name || String(c)));
+            return cats.includes(allLabel) ? cats : [allLabel, ...cats];
+        }
+        // Infer categories from products array if present
+        const rawProducts = siteData?.products;
+        if (Array.isArray(rawProducts) && rawProducts.length > 0) {
+            const inferred = Array.from(new Set(rawProducts.map((p) => p.category).filter(Boolean)));
+            if (inferred.length > 0) {
+                return [allLabel, ...inferred];
+            }
+        }
+        return DEFAULT_CATEGORIES;
+    }, [categories, siteData, allLabel]);
+    const handleSelect = (category) => {
+        if (controlledSelected === undefined) {
+            setInternalSelected(category);
+        }
+        if (onSelectCategory) {
+            onSelectCategory(category);
+        }
+    };
+    return ((0, jsx_runtime_1.jsx)("nav", { className: `deneb-category-pills flex items-center gap-2 overflow-x-auto py-2 no-scrollbar ${className}`, style: {
+            display: 'flex',
+            alignItems: 'center',
+            gap: '0.5rem',
+            overflowX: 'auto',
+            paddingTop: '0.5rem',
+            paddingBottom: '0.5rem',
+            scrollbarWidth: 'none',
+            msOverflowStyle: 'none',
+            ...style,
+        }, "data-preview-field-path": fieldPath, "aria-label": "Product categories", children: resolvedCategories.map((cat, idx) => {
+            const isSelected = activeCategory.toLowerCase() === cat.toLowerCase();
+            return ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => handleSelect(cat), className: `deneb-pill px-4 py-2 rounded-full text-xs md:text-sm font-semibold whitespace-nowrap transition-all duration-200 border ${isSelected
+                    ? 'bg-slate-900 text-white border-slate-900 shadow-sm scale-105'
+                    : 'bg-white text-slate-600 border-slate-200 hover:border-slate-300 hover:text-slate-900 hover:bg-slate-50'}`, style: {
+                    padding: '0.5rem 1rem',
+                    borderRadius: '9999px',
+                    fontSize: '0.8125rem',
+                    fontWeight: 600,
+                    whiteSpace: 'nowrap',
+                    cursor: 'pointer',
+                    transition: 'all 0.2s ease',
+                    border: isSelected ? '1px solid var(--color-primary, #0f172a)' : '1px solid #e2e8f0',
+                    backgroundColor: isSelected ? 'var(--color-primary, #0f172a)' : '#ffffff',
+                    color: isSelected ? '#ffffff' : '#475569',
+                    boxShadow: isSelected ? '0 1px 3px rgba(0,0,0,0.1)' : 'none',
+                }, "data-preview-field-path": `${fieldPath}.${idx}`, "aria-pressed": isSelected, children: cat }, `${cat}-${idx}`));
+        }) }));
+}
+// Canonical alias
+exports.CategoryPills = EditableCategoryPills;

package/dist/EditableFooter.d.ts

@@ -25,7 +25,7 @@ export interface EditableFooterProps extends React.HTMLAttributes<HTMLElement> {
  * - Route Filtering Compliance (`data-target-page` wrappers)
  * - Tailored Tailwind CSS utility classes + resilient inline CSS fallbacks
  *
- * Created by Chamika Gayashan (CEE G)
+ * Created by Chamika Gayashan & Induranga Kawishwara
  */
 export declare function EditableFooter({ defaultLinks, links, basePath, showNewsletter, className, style, ...props }: EditableFooterProps): React.JSX.Element;
 export declare const Footer: typeof EditableFooter;

package/dist/EditableFooter.js

@@ -27,7 +27,7 @@ const DEFAULT_FOOTER_PAGES = [
  * - Route Filtering Compliance (`data-target-page` wrappers)
  * - Tailored Tailwind CSS utility classes + resilient inline CSS fallbacks
  *
- * Created by Chamika Gayashan (CEE G)
+ * Created by Chamika Gayashan & Induranga Kawishwara
  */
 function EditableFooter({ defaultLinks = DEFAULT_FOOTER_PAGES, links, basePath = '', showNewsletter = true, className = '', style, ...props }) {
     const siteData = (0, SiteDataProvider_1.useSiteData)();

package/dist/EditableNavbar.d.ts

@@ -21,7 +21,7 @@ export interface EditableNavbarProps extends React.HTMLAttributes<HTMLElement> {
  * - Responsive mobile toggle and drawer menu
  * - Tailwind CSS classes + resilient inline CSS fallbacks
  *
- * Created by Chamika Gayashan (CEE G)
+ * Created by Chamika Gayashan & Induranga Kawishwara
  */
 export declare function EditableNavbar({ defaultLinks, sticky, activeRoute, basePath, className, style, ...props }: EditableNavbarProps): React.JSX.Element;
 export declare const Navbar: typeof EditableNavbar;

package/dist/EditableNavbar.js

@@ -23,7 +23,7 @@ const DEFAULT_PAGES = [
  * - Responsive mobile toggle and drawer menu
  * - Tailwind CSS classes + resilient inline CSS fallbacks
  *
- * Created by Chamika Gayashan (CEE G)
+ * Created by Chamika Gayashan & Induranga Kawishwara
  */
 function EditableNavbar({ defaultLinks = DEFAULT_PAGES, sticky = true, activeRoute, basePath = '', className = '', style, ...props }) {
     const siteData = (0, SiteDataProvider_1.useSiteData)();

package/dist/contact/FloatingContactWidget.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+export interface FloatingContactWidgetProps {
+    fieldPath?: string;
+    defaultPhone?: string;
+    defaultWhatsApp?: string;
+    defaultEmail?: string;
+    defaultMessage?: string;
+    position?: 'bottom-right' | 'bottom-left';
+    className?: string;
+    style?: React.CSSProperties;
+}
+/**
+ * DENEB UI — Floating Contact Widget
+ *
+ * Sticky conversion powerhouse widget for e-commerce and local commerce storefronts.
+ * Sits elegantly in the corner of the screen across desktop and mobile, offering
+ * instant 1-click WhatsApp chat, phone calls, and email inquiries.
+ *
+ * Created by Chamika Gayashan & Induranga Kawishwara
+ */
+export declare function FloatingContactWidget({ fieldPath, defaultPhone, defaultWhatsApp, defaultEmail, defaultMessage, position, className, style, }: FloatingContactWidgetProps): React.JSX.Element | null;

package/dist/contact/FloatingContactWidget.js

@@ -0,0 +1,68 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FloatingContactWidget = FloatingContactWidget;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const SiteDataProvider_1 = require("../SiteDataProvider");
+const urls_1 = require("../utils/urls");
+/**
+ * DENEB UI — Floating Contact Widget
+ *
+ * Sticky conversion powerhouse widget for e-commerce and local commerce storefronts.
+ * Sits elegantly in the corner of the screen across desktop and mobile, offering
+ * instant 1-click WhatsApp chat, phone calls, and email inquiries.
+ *
+ * Created by Chamika Gayashan & Induranga Kawishwara
+ */
+function FloatingContactWidget({ fieldPath = 'contact', defaultPhone, defaultWhatsApp, defaultEmail, defaultMessage = 'Hello! I have an inquiry about your products.', position = 'bottom-right', className = '', style = {}, }) {
+    const { siteData } = (0, SiteDataProvider_1.useSiteData)();
+    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
+    const contactData = siteData?.contact || {};
+    const phone = contactData.phone || defaultPhone || '';
+    const whatsapp = contactData.whatsapp || defaultWhatsApp || phone;
+    const email = contactData.email || defaultEmail || '';
+    const storeName = siteData?.site?.name || 'Support';
+    const hasWhatsApp = Boolean(whatsapp && whatsapp.trim().length > 0);
+    const hasPhone = Boolean(phone && phone.trim().length > 0);
+    const hasEmail = Boolean(email && email.trim().length > 0);
+    // If no contact channel exists, hide cleanly
+    if (!hasWhatsApp && !hasPhone && !hasEmail) {
+        return null;
+    }
+    const isRight = position === 'bottom-right';
+    const containerStyle = {
+        position: 'fixed',
+        bottom: '1.5rem',
+        [isRight ? 'right' : 'left']: '1.5rem',
+        zIndex: 50,
+        fontFamily: 'inherit',
+        ...style,
+    };
+    const bubbleStyle = {
+        backgroundColor: '#25D366', // Official WhatsApp green
+        color: '#ffffff',
+        width: '3.5rem',
+        height: '3.5rem',
+        borderRadius: '9999px',
+        boxShadow: '0 10px 25px -5px rgba(37, 211, 102, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.1)',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        cursor: 'pointer',
+        border: 'none',
+        transition: 'transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s ease',
+    };
+    const menuStyle = {
+        position: 'absolute',
+        bottom: '4.25rem',
+        [isRight ? 'right' : 'left']: '0',
+        width: '18rem',
+        backgroundColor: '#ffffff',
+        borderRadius: '1rem',
+        boxShadow: '0 20px 25px -5px rgba(0, 0, 0, 0.15), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
+        border: '1px solid rgba(226, 232, 240, 0.8)',
+        overflow: 'hidden',
+        animation: 'deneb-pop 0.2s cubic-bezier(0.16, 1, 0.3, 1)',
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { className: `deneb-floating-contact fixed z-50 bottom-6 ${isRight ? 'right-6' : 'left-6'} ${className}`, style: containerStyle, "data-preview-field-path": fieldPath, children: [isOpen && ((0, jsx_runtime_1.jsxs)("div", { className: "deneb-contact-popup absolute bottom-16 bg-white rounded-2xl shadow-2xl border border-slate-200 w-72 overflow-hidden text-slate-800", style: menuStyle, children: [(0, jsx_runtime_1.jsxs)("div", { className: "bg-slate-900 text-white p-4 flex items-center justify-between", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h4", { className: "font-bold text-sm leading-tight text-white", children: storeName }), (0, jsx_runtime_1.jsxs)("p", { className: "text-xs text-emerald-400 font-medium flex items-center gap-1.5 mt-0.5", children: [(0, jsx_runtime_1.jsx)("span", { className: "w-2 h-2 rounded-full bg-emerald-400 animate-pulse" }), "Online & Ready to Help"] })] }), (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => setIsOpen(false), className: "text-slate-400 hover:text-white p-1 rounded transition-colors", "aria-label": "Close contact drawer", children: (0, jsx_runtime_1.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", children: [(0, jsx_runtime_1.jsx)("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), (0, jsx_runtime_1.jsx)("line", { x1: "6", y1: "6", x2: "18", y2: "18" })] }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "p-3 space-y-2 text-sm bg-slate-50", children: [hasWhatsApp && ((0, jsx_runtime_1.jsxs)("a", { href: (0, urls_1.createWhatsAppUrl)(whatsapp, defaultMessage), target: "_blank", rel: "noopener noreferrer", className: "flex items-center gap-3 p-2.5 rounded-xl bg-white border border-slate-200/80 hover:border-emerald-400 hover:shadow-sm transition-all text-slate-800", "data-preview-field-path": `${fieldPath}.whatsapp`, children: [(0, jsx_runtime_1.jsx)("div", { className: "w-9 h-9 rounded-lg bg-emerald-50 text-emerald-600 flex items-center justify-center flex-shrink-0", children: (0, jsx_runtime_1.jsx)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "currentColor", 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-.582 2.128 2.182-.573c.978.58 1.911.928 3.145.929 3.178 0 5.767-2.587 5.768-5.766.001-3.187-2.575-5.77-5.764-5.771zm3.392 8.244c-.144.405-.837.774-1.17.824-.312.045-.694.062-1.116-.073-.266-.086-.61-.225-1.047-.417-1.854-.814-3.056-2.695-3.15-2.819-.092-.124-.755-.999-.755-1.907 0-.909.479-1.353.649-1.536.17-.183.371-.23.495-.23.124 0 .248.002.355.008.113.006.265-.043.414.316.155.372.531 1.296.577 1.39.046.094.077.204.015.328-.061.124-.092.202-.184.31-.092.108-.195.241-.278.324-.093.093-.19.195-.082.381.109.186.483.797 1.037 1.289.713.633 1.314.829 1.501.922.186.093.295.078.404-.047.11-.124.467-.543.591-.729.124-.186.248-.155.418-.093.17.062 1.082.51 1.268.603.186.093.31.14.356.217.046.077.046.449-.098.854z" }) }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex-1 min-w-0", children: [(0, jsx_runtime_1.jsx)("div", { className: "font-semibold text-slate-900 text-xs", children: "Chat on WhatsApp" }), (0, jsx_runtime_1.jsx)("div", { className: "text-[11px] text-slate-500 truncate", children: whatsapp })] })] })), hasPhone && ((0, jsx_runtime_1.jsxs)("a", { href: (0, urls_1.createPhoneUrl)(phone), className: "flex items-center gap-3 p-2.5 rounded-xl bg-white border border-slate-200/80 hover:border-blue-400 hover:shadow-sm transition-all text-slate-800", "data-preview-field-path": `${fieldPath}.phone`, children: [(0, jsx_runtime_1.jsx)("div", { className: "w-9 h-9 rounded-lg bg-blue-50 text-blue-600 flex items-center justify-center flex-shrink-0", children: (0, jsx_runtime_1.jsx)("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: (0, jsx_runtime_1.jsx)("path", { d: "M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z" }) }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex-1 min-w-0", children: [(0, jsx_runtime_1.jsx)("div", { className: "font-semibold text-slate-900 text-xs", children: "Direct Call" }), (0, jsx_runtime_1.jsx)("div", { className: "text-[11px] text-slate-500 truncate", children: phone })] })] })), hasEmail && ((0, jsx_runtime_1.jsxs)("a", { href: (0, urls_1.createEmailUrl)(email, `Inquiry: ${storeName}`), className: "flex items-center gap-3 p-2.5 rounded-xl bg-white border border-slate-200/80 hover:border-purple-400 hover:shadow-sm transition-all text-slate-800", "data-preview-field-path": `${fieldPath}.email`, children: [(0, jsx_runtime_1.jsx)("div", { className: "w-9 h-9 rounded-lg bg-purple-50 text-purple-600 flex items-center justify-center flex-shrink-0", children: (0, jsx_runtime_1.jsxs)("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [(0, jsx_runtime_1.jsx)("path", { d: "M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" }), (0, jsx_runtime_1.jsx)("polyline", { points: "22,6 12,13 2,6" })] }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex-1 min-w-0", children: [(0, jsx_runtime_1.jsx)("div", { className: "font-semibold text-slate-900 text-xs", children: "Send Email" }), (0, jsx_runtime_1.jsx)("div", { className: "text-[11px] text-slate-500 truncate", children: email })] })] }))] })] })), (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => setIsOpen(!isOpen), style: bubbleStyle, className: "deneb-bubble hover:scale-105 active:scale-95 flex items-center justify-center focus:outline-none", "aria-label": "Toggle contact channels", children: isOpen ? ((0, jsx_runtime_1.jsxs)("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [(0, jsx_runtime_1.jsx)("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), (0, jsx_runtime_1.jsx)("line", { x1: "6", y1: "6", x2: "18", y2: "18" })] })) : ((0, jsx_runtime_1.jsx)("svg", { width: "28", height: "28", viewBox: "0 0 24 24", fill: "currentColor", 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-.582 2.128 2.182-.573c.978.58 1.911.928 3.145.929 3.178 0 5.767-2.587 5.768-5.766.001-3.187-2.575-5.77-5.764-5.771zm3.392 8.244c-.144.405-.837.774-1.17.824-.312.045-.694.062-1.116-.073-.266-.086-.61-.225-1.047-.417-1.854-.814-3.056-2.695-3.15-2.819-.092-.124-.755-.999-.755-1.907 0-.909.479-1.353.649-1.536.17-.183.371-.23.495-.23.124 0 .248.002.355.008.113.006.265-.043.414.316.155.372.531 1.296.577 1.39.046.094.077.204.015.328-.061.124-.092.202-.184.31-.092.108-.195.241-.278.324-.093.093-.19.195-.082.381.109.186.483.797 1.037 1.289.713.633 1.314.829 1.501.922.186.093.295.078.404-.047.11-.124.467-.543.591-.729.124-.186.248-.155.418-.093.17.062 1.082.51 1.268.603.186.093.31.14.356.217.046.077.046.449-.098.854z" }) })) })] }));
+}

package/dist/contact/index.d.ts

@@ -3,3 +3,4 @@ export * from './WhatsAppButton';
 export * from './PhoneButton';
 export * from './EmailButton';
 export * from './ContactActions';
+export * from './FloatingContactWidget';

package/dist/contact/index.js

@@ -19,3 +19,4 @@ __exportStar(require("./WhatsAppButton"), exports);
 __exportStar(require("./PhoneButton"), exports);
 __exportStar(require("./EmailButton"), exports);
 __exportStar(require("./ContactActions"), exports);
+__exportStar(require("./FloatingContactWidget"), exports);

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 /**
  * DENEB UI — The Visual-First React Framework for High-Converting Storefronts
- * Created by Chamika Gayashan (CEE G)
+ * Created by Chamika Gayashan & Induranga Kawishwara
  */
 export * from './EditableText';
 export * from './EditableImage';
@@ -19,6 +19,8 @@ export * from './EditableNavbar';
 export * from './EditableFooter';
 export * from './EditableHero';
 export * from './EditableDialog';
+export * from './EditableAnnouncementBar';
+export * from './EditableCategoryPills';
 export * from './ThemeStyles';
 export * from './SiteDataProvider';
 export * from './utils';
@@ -49,13 +51,16 @@ export { EditableContactForm as ContactForm } from './EditableContactForm';
 export { EditableNavbar as Navbar, EditableNavbar as Header } from './EditableNavbar';
 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 { FloatingContactWidget } from './contact/FloatingContactWidget';
 /**
  * DENEB UI Framework Metadata
- * Developed by Chamika Gayashan (CEE G)
+ * Developed by Chamika Gayashan & Induranga Kawishwara
  */
 export declare const DENEB_FRAMEWORK_NAME = "DENEB UI";
 export declare const DENEB_FRAMEWORK_VERSION = "2.0.0";
-export declare const DENEB_AUTHOR = "Chamika Gayashan (CEE G)";
+export declare const DENEB_AUTHOR = "Chamika Gayashan & Induranga Kawishwara";
 export declare const CEEG_FRAMEWORK_NAME = "DENEB UI";
 export declare const CEEG_FRAMEWORK_VERSION = "2.0.0";
-export declare const CEEG_AUTHOR = "Chamika Gayashan (CEE G)";
+export declare const CEEG_AUTHOR = "Chamika Gayashan & Induranga Kawishwara";

package/dist/index.js

@@ -1,7 +1,7 @@
 "use strict";
 /**
  * DENEB UI — The Visual-First React Framework for High-Converting Storefronts
- * Created by Chamika Gayashan (CEE G)
+ * Created by Chamika Gayashan & Induranga Kawishwara
  */
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
@@ -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.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.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);
@@ -36,6 +36,8 @@ __exportStar(require("./EditableNavbar"), exports);
 __exportStar(require("./EditableFooter"), exports);
 __exportStar(require("./EditableHero"), exports);
 __exportStar(require("./EditableDialog"), exports);
+__exportStar(require("./EditableAnnouncementBar"), exports);
+__exportStar(require("./EditableCategoryPills"), exports);
 __exportStar(require("./ThemeStyles"), exports);
 __exportStar(require("./SiteDataProvider"), exports);
 // Smart template components & actions
@@ -93,13 +95,19 @@ Object.defineProperty(exports, "Footer", { enumerable: true, get: function () {
 var EditableHero_1 = require("./EditableHero");
 Object.defineProperty(exports, "Hero", { enumerable: true, get: function () { return EditableHero_1.EditableHeroCentered; } });
 Object.defineProperty(exports, "HeroSplit", { enumerable: true, get: function () { return EditableHero_1.EditableHeroSplit; } });
+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 FloatingContactWidget_1 = require("./contact/FloatingContactWidget");
+Object.defineProperty(exports, "FloatingContactWidget", { enumerable: true, get: function () { return FloatingContactWidget_1.FloatingContactWidget; } });
 /**
  * DENEB UI Framework Metadata
- * Developed by Chamika Gayashan (CEE G)
+ * Developed by Chamika Gayashan & Induranga Kawishwara
  */
 exports.DENEB_FRAMEWORK_NAME = 'DENEB UI';
 exports.DENEB_FRAMEWORK_VERSION = '2.0.0';
-exports.DENEB_AUTHOR = 'Chamika Gayashan (CEE G)';
+exports.DENEB_AUTHOR = 'Chamika Gayashan & Induranga Kawishwara';
 // Backward compatibility alias
 exports.CEEG_FRAMEWORK_NAME = exports.DENEB_FRAMEWORK_NAME;
 exports.CEEG_FRAMEWORK_VERSION = exports.DENEB_FRAMEWORK_VERSION;

package/dist/utils/urls.d.ts

@@ -1,6 +1,6 @@
 /**
  * DENEB UI — URL & Action Helpers
- * Created by Chamika Gayashan (CEE G)
+ * Created by Chamika Gayashan & Induranga Kawishwara
  */
 export interface MapLocationInput {
     mapUrl?: string | null;

package/dist/utils/urls.js

@@ -1,7 +1,7 @@
 "use strict";
 /**
  * DENEB UI — URL & Action Helpers
- * Created by Chamika Gayashan (CEE G)
+ * Created by Chamika Gayashan & Induranga Kawishwara
  */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createWhatsAppUrl = createWhatsAppUrl;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@deneb-ui/ui",
-  "version": "2.0.0",
-  "description": "DENEB UI - The Visual-First React Framework for High-Converting Fivora Storefronts, created by Chamika Gayashan (CEE G).",
+  "version": "2.0.3",
+  "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": {
@@ -26,7 +26,7 @@
     "nextjs",
     "react"
   ],
-  "author": "Chamika Gayashan (CEE G)",
+  "author": "Chamika Gayashan & Induranga Kawishwara",
   "license": "MIT",
   "dependencies": {},
   "peerDependencies": {