@deneb-ui/ui 2.0.15 → 2.0.17

package/dist/EditableCustomerReviews.d.ts

@@ -0,0 +1,48 @@
+import React from 'react';
+export interface CustomerReviewItem {
+    id?: string | number;
+    author: string;
+    rating: number;
+    date?: string;
+    comment: string;
+    verified?: boolean;
+    productName?: string;
+    helpfulCount?: number;
+    [key: string]: unknown;
+}
+export interface EditableCustomerReviewsProps extends React.HTMLAttributes<HTMLElement> {
+    /**
+     * Field path prefix for live Fivora Visual Editing synchronization (e.g. "home").
+     */
+    sectionPath?: string;
+    /**
+     * Title of the reviews section.
+     */
+    title?: string;
+    /**
+     * Subtitle tag.
+     */
+    subtitle?: string;
+    /**
+     * Average score (e.g. 4.9).
+     */
+    averageRating?: number | string;
+    /**
+     * Total review count display.
+     */
+    totalReviews?: number | string;
+    /**
+     * Array of reviews.
+     */
+    reviews?: CustomerReviewItem[];
+    className?: string;
+}
+/**
+ * EditableCustomerReviews is an elite social-proof component featuring
+ * star breakdowns, verified buyer authentication badges, helpful counters,
+ * and live Fivora visual editing synchronization.
+ *
+ * Created by Chamika Gayashan & Induranga Kawishwara
+ */
+export declare function EditableCustomerReviews({ sectionPath, title, subtitle, averageRating, totalReviews, reviews, className, style, ...props }: EditableCustomerReviewsProps): React.JSX.Element;
+export declare const CustomerReviews: typeof EditableCustomerReviews;

package/dist/EditableCustomerReviews.js

@@ -0,0 +1,60 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CustomerReviews = void 0;
+exports.EditableCustomerReviews = EditableCustomerReviews;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const DEFAULT_REVIEWS = [
+    {
+        id: 1,
+        author: 'Liam Vance',
+        rating: 5,
+        date: '2 days ago',
+        comment: 'The cushioning and responsiveness are unbelievable. Best performance shoe I have owned for tempo runs.',
+        verified: true,
+        productName: 'VANTA Aero X',
+        helpfulCount: 14,
+    },
+    {
+        id: 2,
+        author: 'Elena Rostova',
+        rating: 5,
+        date: '1 week ago',
+        comment: 'Sleek design, fits true to size, and the breathability is noticeable on 10k morning runs. Highly recommended!',
+        verified: true,
+        productName: 'VANTA Flux 01',
+        helpfulCount: 9,
+    },
+    {
+        id: 3,
+        author: 'Marcus Chen',
+        rating: 4,
+        date: '2 weeks ago',
+        comment: 'Exceptional build quality and premium materials. Fast shipping and very responsive WhatsApp support.',
+        verified: true,
+        productName: 'VANTA Stealth Pro',
+        helpfulCount: 6,
+    },
+];
+/**
+ * EditableCustomerReviews is an elite social-proof component featuring
+ * star breakdowns, verified buyer authentication badges, helpful counters,
+ * and live Fivora visual editing synchronization.
+ *
+ * Created by Chamika Gayashan & Induranga Kawishwara
+ */
+function EditableCustomerReviews({ sectionPath = 'home', title = 'Loved by Athletes & Runners Worldwide', subtitle = 'Verified Customer Reviews', averageRating = '4.9', totalReviews = '1,420+', reviews = DEFAULT_REVIEWS, className = '', style, ...props }) {
+    const [selectedStarFilter, setSelectedStarFilter] = (0, react_1.useState)(null);
+    const filteredReviews = (0, react_1.useMemo)(() => {
+        if (selectedStarFilter === null)
+            return reviews;
+        return reviews.filter((r) => r.rating === selectedStarFilter);
+    }, [reviews, selectedStarFilter]);
+    return ((0, jsx_runtime_1.jsxs)("section", { "data-preview-page-key": sectionPath, className: `editable-customer-reviews max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 ${className}`.trim(), style: style, ...props, children: [(0, jsx_runtime_1.jsxs)("div", { className: "text-center max-w-2xl mx-auto mb-12", children: [subtitle && ((0, jsx_runtime_1.jsx)("span", { "data-preview-field-path": `${sectionPath}.reviewsSubtitle`, className: "text-xs font-black tracking-widest uppercase text-lime-400 block mb-2", children: subtitle })), (0, jsx_runtime_1.jsx)("h2", { "data-preview-field-path": `${sectionPath}.reviewsTitle`, className: "text-3xl sm:text-4xl font-extrabold tracking-tight text-white leading-tight", children: title }), (0, jsx_runtime_1.jsxs)("div", { className: "mt-4 flex items-center justify-center gap-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex text-amber-400 text-lg", children: '★★★★★' }), (0, jsx_runtime_1.jsxs)("span", { className: "text-white font-extrabold text-lg", children: [(0, jsx_runtime_1.jsx)("span", { "data-preview-field-path": `${sectionPath}.reviewsAverage`, children: averageRating }), " / 5.0"] }), (0, jsx_runtime_1.jsxs)("span", { className: "text-slate-400 text-sm", children: ["(", (0, jsx_runtime_1.jsx)("span", { "data-preview-field-path": `${sectionPath}.reviewsCount`, children: totalReviews }), " reviews)"] })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex justify-center gap-2 mb-8", children: [(0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => setSelectedStarFilter(null), className: `px-3.5 py-1.5 rounded-xl text-xs font-bold transition-all ${selectedStarFilter === null
+                            ? 'bg-lime-400 text-slate-950 font-extrabold shadow-sm'
+                            : 'bg-slate-900/60 text-slate-400 hover:text-white border border-slate-800'}`, children: "All Reviews" }), [5, 4, 3].map((stars) => ((0, jsx_runtime_1.jsxs)("button", { type: "button", onClick: () => setSelectedStarFilter(stars), className: `px-3.5 py-1.5 rounded-xl text-xs font-bold transition-all flex items-center gap-1 ${selectedStarFilter === stars
+                            ? 'bg-lime-400 text-slate-950 font-extrabold shadow-sm'
+                            : 'bg-slate-900/60 text-slate-400 hover:text-white border border-slate-800'}`, children: [(0, jsx_runtime_1.jsxs)("span", { children: [stars, " Stars"] }), (0, jsx_runtime_1.jsx)("span", { className: "text-amber-400", children: "\u2605" })] }, stars)))] }), (0, jsx_runtime_1.jsx)("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-6", children: filteredReviews.map((review, i) => ((0, jsx_runtime_1.jsxs)("div", { className: "p-6 rounded-2xl bg-gradient-to-b from-slate-900/60 to-slate-950/80 border border-slate-800/80 flex flex-col justify-between hover:border-slate-700 transition-all duration-200", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between mb-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex text-amber-400 text-sm", children: Array.from({ length: review.rating }).map((_, idx) => ((0, jsx_runtime_1.jsx)("span", { children: "\u2605" }, idx))) }), review.verified !== false && ((0, jsx_runtime_1.jsxs)("span", { className: "inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-[10px] font-bold bg-emerald-500/10 text-emerald-400 border border-emerald-500/20", children: [(0, jsx_runtime_1.jsx)("svg", { className: "w-3 h-3 fill-current", viewBox: "0 0 20 20", children: (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z", clipRule: "evenodd" }) }), "Verified Buyer"] }))] }), (0, jsx_runtime_1.jsxs)("p", { "data-preview-field-path": `${sectionPath}.review${i + 1}Comment`, className: "text-sm text-slate-300 leading-relaxed italic mb-4", children: ["\u201C", review.comment, "\u201D"] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "pt-4 border-t border-slate-800/60 flex items-center justify-between", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("span", { "data-preview-field-path": `${sectionPath}.review${i + 1}Author`, className: "block text-xs font-bold text-white", children: review.author }), review.productName && ((0, jsx_runtime_1.jsxs)("span", { className: "text-[11px] text-slate-400 block", children: ["Purchased: ", review.productName] }))] }), review.date && ((0, jsx_runtime_1.jsx)("span", { className: "text-[11px] text-slate-500 font-mono", children: review.date }))] })] }, review.id || i))) })] }));
+}
+// Canonical alias
+exports.CustomerReviews = EditableCustomerReviews;

package/dist/EditableProductGrid.d.ts

@@ -0,0 +1,55 @@
+import React from 'react';
+import { ProductItem, ProductCardVariant } from './EditableProductCard';
+export interface EditableProductGridProps extends React.HTMLAttributes<HTMLElement> {
+    /**
+     * Field path prefix for live Fivora Visual Editing synchronization (e.g. "home").
+     */
+    sectionPath?: string;
+    /**
+     * Title of the product grid section.
+     */
+    title?: string;
+    /**
+     * Subtitle or category tag for the grid section.
+     */
+    subtitle?: string;
+    /**
+     * Array of product items.
+     */
+    products: ProductItem[];
+    /**
+     * Optional category filter tabs (e.g. ['All', 'Sneakers', 'Performance', 'Lifestyle']).
+     */
+    categories?: string[];
+    /**
+     * Card visual variant: 'modern-glass' | 'classic' | 'minimal' | 'horizontal'.
+     */
+    cardVariant?: ProductCardVariant;
+    /**
+     * Responsive columns configuration.
+     */
+    columns?: {
+        mobile?: number;
+        tablet?: number;
+        desktop?: number;
+    };
+    /**
+     * Callback when a user clicks the quick view action on a card.
+     */
+    onQuickView?: (product: ProductItem, itemPath: string) => void;
+    /**
+     * Custom field path prefix for individual cards (default: "product").
+     * e.g. "home.product1", "home.product2", etc.
+     */
+    cardPrefix?: string;
+    className?: string;
+}
+/**
+ * EditableProductGrid is an elite, fully responsive e-commerce showcase grid
+ * with interactive category filtering, live Fivora visual editing synchronization,
+ * and built-in Quick View modal triggers.
+ *
+ * Created by Chamika Gayashan & Induranga Kawishwara
+ */
+export declare function EditableProductGrid({ sectionPath, title, subtitle, products, categories, cardVariant, columns, onQuickView, cardPrefix, className, style, ...props }: EditableProductGridProps): React.JSX.Element;
+export declare const ProductGrid: typeof EditableProductGrid;

package/dist/EditableProductGrid.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProductGrid = void 0;
+exports.EditableProductGrid = EditableProductGrid;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const EditableProductCard_1 = require("./EditableProductCard");
+/**
+ * EditableProductGrid is an elite, fully responsive e-commerce showcase grid
+ * with interactive category filtering, live Fivora visual editing synchronization,
+ * and built-in Quick View modal triggers.
+ *
+ * Created by Chamika Gayashan & Induranga Kawishwara
+ */
+function EditableProductGrid({ sectionPath = 'home', title = 'Featured Collection', subtitle = 'Just Dropped', products = [], categories = ['All'], cardVariant = 'modern-glass', columns = { mobile: 1, tablet: 2, desktop: 4 }, onQuickView, cardPrefix = 'product', className = '', style, ...props }) {
+    const [activeCategory, setActiveCategory] = (0, react_1.useState)(categories[0] || 'All');
+    const filteredProducts = (0, react_1.useMemo)(() => {
+        if (!activeCategory || activeCategory.toLowerCase() === 'all') {
+            return products;
+        }
+        return products.filter((p) => {
+            const cat = String(p.category || '').toLowerCase();
+            return cat === activeCategory.toLowerCase();
+        });
+    }, [products, activeCategory]);
+    // Map column config to CSS grid class names
+    const gridColClasses = (0, react_1.useMemo)(() => {
+        const m = columns.mobile || 1;
+        const t = columns.tablet || 2;
+        const d = columns.desktop || 4;
+        const mClass = m === 2 ? 'grid-cols-2' : 'grid-cols-1';
+        const tClass = t === 3 ? 'sm:grid-cols-3' : 'sm:grid-cols-2';
+        const dClass = d === 3 ? 'lg:grid-cols-3' : d === 2 ? 'lg:grid-cols-2' : 'lg:grid-cols-4';
+        return `${mClass} ${tClass} ${dClass}`;
+    }, [columns]);
+    return ((0, jsx_runtime_1.jsxs)("section", { "data-preview-page-key": sectionPath, className: `editable-product-grid max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 ${className}`.trim(), style: style, ...props, children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col md:flex-row md:items-end justify-between mb-10 gap-6", children: [(0, jsx_runtime_1.jsxs)("div", { children: [subtitle && ((0, jsx_runtime_1.jsx)("span", { "data-preview-field-path": `${sectionPath}.gridSubtitle`, className: "text-xs font-black tracking-widest uppercase text-lime-400 block mb-2", children: subtitle })), (0, jsx_runtime_1.jsx)("h2", { "data-preview-field-path": `${sectionPath}.gridTitle`, className: "text-3xl sm:text-4xl font-extrabold tracking-tight text-white leading-tight", children: title })] }), categories.length > 1 && ((0, jsx_runtime_1.jsx)("div", { className: "flex flex-wrap items-center gap-2", children: categories.map((cat) => {
+                            const isActive = activeCategory.toLowerCase() === cat.toLowerCase();
+                            return ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => setActiveCategory(cat), className: `px-4 py-2 rounded-xl text-xs font-bold transition-all duration-200 ${isActive
+                                    ? 'bg-white text-slate-950 shadow-md scale-102 font-extrabold'
+                                    : 'bg-slate-900/60 text-slate-400 hover:text-white border border-slate-800/80 hover:bg-slate-850'}`, children: cat }, cat));
+                        }) }))] }), filteredProducts.length > 0 ? ((0, jsx_runtime_1.jsx)("div", { className: `grid ${gridColClasses} gap-6 sm:gap-8`, children: filteredProducts.map((product, idx) => {
+                    const itemPath = `${sectionPath}.${cardPrefix}${idx + 1}`;
+                    return ((0, jsx_runtime_1.jsxs)("div", { className: "relative group", children: [(0, jsx_runtime_1.jsx)(EditableProductCard_1.EditableProductCard, { itemPath: itemPath, product: product, cardVariant: cardVariant, className: "h-full" }), onQuickView && ((0, jsx_runtime_1.jsx)("div", { className: "absolute top-4 right-4 z-20 opacity-0 group-hover:opacity-100 transition-opacity duration-200", children: (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => onQuickView(product, itemPath), className: "p-2.5 rounded-xl bg-slate-950/80 backdrop-blur-md text-white hover:bg-lime-400 hover:text-slate-950 shadow-lg transition-all active:scale-95", title: "Quick View", "aria-label": `Quick View ${product.name || product.title}`, children: (0, jsx_runtime_1.jsxs)("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: [(0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 12a3 3 0 11-6 0 3 3 0 016 0z" }), (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" })] }) }) }))] }, product.id || idx));
+                }) })) : (
+            /* Empty State */
+            (0, jsx_runtime_1.jsxs)("div", { className: "text-center py-20 px-4 rounded-3xl border border-dashed border-slate-800 bg-slate-900/30", children: [(0, jsx_runtime_1.jsxs)("p", { className: "text-sm font-medium text-slate-400", children: ["No products found matching category \"", activeCategory, "\"."] }), (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => setActiveCategory('All'), className: "mt-4 px-4 py-2 rounded-xl text-xs font-bold bg-lime-400 text-slate-950 hover:bg-lime-300 transition-colors", children: "View All Products" })] }))] }));
+}
+// Canonical alias
+exports.ProductGrid = EditableProductGrid;

package/dist/index.d.ts

@@ -9,7 +9,9 @@ export * from './EditableBox';
 export * from './EditableGrid';
 export * from './EditableSection';
 export * from './EditableProductCard';
+export * from './EditableProductGrid';
 export * from './EditableProductDetail';
+export * from './EditableCustomerReviews';
 export * from './EditableServiceCard';
 export * from './EditableCard';
 export * from './EditablePricingCard';
@@ -48,7 +50,9 @@ export { EditableSection as Section } from './EditableSection';
 export { EditableBox as Box } from './EditableBox';
 export { EditableList as List } from './EditableList';
 export { EditableProductCard as ProductCard } from './EditableProductCard';
+export { EditableProductGrid as ProductGrid } from './EditableProductGrid';
 export { EditableProductDetail as ProductDetail } from './EditableProductDetail';
+export { EditableCustomerReviews as CustomerReviews } from './EditableCustomerReviews';
 export { EditableServiceCard as ServiceCard } from './EditableServiceCard';
 export { EditablePricingCard as PricingCard } from './EditablePricingCard';
 export { EditableTestimonialCard as TestimonialCard } from './EditableTestimonialCard';

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.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.ProductDetail = 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.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);
@@ -26,7 +26,9 @@ __exportStar(require("./EditableBox"), exports);
 __exportStar(require("./EditableGrid"), exports);
 __exportStar(require("./EditableSection"), exports);
 __exportStar(require("./EditableProductCard"), exports);
+__exportStar(require("./EditableProductGrid"), exports);
 __exportStar(require("./EditableProductDetail"), exports);
+__exportStar(require("./EditableCustomerReviews"), exports);
 __exportStar(require("./EditableServiceCard"), exports);
 __exportStar(require("./EditableCard"), exports);
 __exportStar(require("./EditablePricingCard"), exports);
@@ -81,8 +83,12 @@ var EditableList_1 = require("./EditableList");
 Object.defineProperty(exports, "List", { enumerable: true, get: function () { return EditableList_1.EditableList; } });
 var EditableProductCard_1 = require("./EditableProductCard");
 Object.defineProperty(exports, "ProductCard", { enumerable: true, get: function () { return EditableProductCard_1.EditableProductCard; } });
+var EditableProductGrid_1 = require("./EditableProductGrid");
+Object.defineProperty(exports, "ProductGrid", { enumerable: true, get: function () { return EditableProductGrid_1.EditableProductGrid; } });
 var EditableProductDetail_1 = require("./EditableProductDetail");
 Object.defineProperty(exports, "ProductDetail", { enumerable: true, get: function () { return EditableProductDetail_1.EditableProductDetail; } });
+var EditableCustomerReviews_1 = require("./EditableCustomerReviews");
+Object.defineProperty(exports, "CustomerReviews", { enumerable: true, get: function () { return EditableCustomerReviews_1.EditableCustomerReviews; } });
 var EditableServiceCard_1 = require("./EditableServiceCard");
 Object.defineProperty(exports, "ServiceCard", { enumerable: true, get: function () { return EditableServiceCard_1.EditableServiceCard; } });
 var EditablePricingCard_1 = require("./EditablePricingCard");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deneb-ui/ui",
-  "version": "2.0.15",
+  "version": "2.0.17",
   "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",
@@ -9,7 +9,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/deneb-ui/core.git",
+    "url": "git+https://github.com/deneb-ui/core.git",
     "directory": "packages/deneb-ui"
   },
   "homepage": "https://github.com/deneb-ui/core#readme",