@deneb-ui/ui 2.0.64 → 2.0.66
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/EditableCustomerReviews.js +5 -5
- package/dist/EditableGoogleFeedback.d.ts +1 -1
- package/dist/EditableGoogleFeedback.js +21 -24
- package/dist/EditableProductGrid.js +3 -3
- package/dist/EditableTestimonialCard.js +3 -3
- package/dist/EditableTestimonialSection.d.ts +0 -1
- package/dist/EditableTestimonialSection.js +5 -5
- package/dist/TrustBadges.js +3 -3
- package/package.json +2 -2
|
@@ -50,11 +50,11 @@ function EditableCustomerReviews({ sectionPath = 'home', title = 'Loved by Athle
|
|
|
50
50
|
return reviews;
|
|
51
51
|
return reviews.filter((r) => r.rating === selectedStarFilter);
|
|
52
52
|
}, [reviews, selectedStarFilter]);
|
|
53
|
-
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
|
|
54
|
-
? 'bg-lime-400 text-slate-950 font-extrabold shadow-sm'
|
|
55
|
-
: 'bg-slate-900/60 text-slate-400 hover:text-white border
|
|
56
|
-
? 'bg-lime-400 text-slate-950 font-extrabold shadow-sm'
|
|
57
|
-
: 'bg-slate-900/60 text-slate-400 hover:text-white border
|
|
53
|
+
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-emerald-600 dark: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-slate-900 dark: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-500 dark:text-amber-400 text-lg", children: '★★★★★' }), (0, jsx_runtime_1.jsxs)("span", { className: "text-slate-900 dark: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-500 dark: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
|
|
54
|
+
? 'bg-slate-900 text-white dark:bg-lime-400 dark:text-slate-950 font-extrabold shadow-sm'
|
|
55
|
+
: 'bg-slate-100 text-slate-600 hover:text-slate-900 border border-slate-200 dark:bg-slate-900/60 dark:text-slate-400 dark:hover:text-white dark: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
|
|
56
|
+
? 'bg-slate-900 text-white dark:bg-lime-400 dark:text-slate-950 font-extrabold shadow-sm'
|
|
57
|
+
: 'bg-slate-100 text-slate-600 hover:text-slate-900 border border-slate-200 dark:bg-slate-900/60 dark:text-slate-400 dark:hover:text-white dark:border-slate-800'}`, children: [(0, jsx_runtime_1.jsxs)("span", { children: [stars, " Stars"] }), (0, jsx_runtime_1.jsx)("span", { className: "text-amber-500 dark: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-white border border-slate-200 hover:border-slate-300 shadow-sm hover:shadow-md dark:bg-gradient-to-b dark:from-slate-900/60 dark:to-slate-950/80 dark:border-slate-800/80 dark:hover:border-slate-700 flex flex-col justify-between 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-500 dark: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-50 text-emerald-700 border border-emerald-200 dark:bg-emerald-500/10 dark:text-emerald-400 dark: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-700 dark: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-100 dark: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-slate-900 dark:text-white", children: review.author }), review.productName && ((0, jsx_runtime_1.jsxs)("span", { className: "text-[11px] text-slate-500 dark:text-slate-400 block", children: ["Purchased: ", review.productName] }))] }), review.date && ((0, jsx_runtime_1.jsx)("span", { className: "text-[11px] text-slate-400 dark:text-slate-500 font-mono", children: review.date }))] })] }, review.id || i))) })] }));
|
|
58
58
|
}
|
|
59
59
|
// Canonical alias
|
|
60
60
|
exports.CustomerReviews = EditableCustomerReviews;
|
|
@@ -22,4 +22,4 @@ export interface EditableGoogleFeedbackProps extends React.HTMLAttributes<HTMLEl
|
|
|
22
22
|
className?: string;
|
|
23
23
|
cardClassName?: string;
|
|
24
24
|
}
|
|
25
|
-
export declare function EditableGoogleFeedback({
|
|
25
|
+
export declare function EditableGoogleFeedback({ heading, subheading, badgeTitle, badgeRating, badgeReviewsCount, badgeIcon, feedbacks, maxStars, className, cardClassName, style, basePath, ...props }: EditableGoogleFeedbackProps): React.JSX.Element;
|
|
@@ -56,12 +56,12 @@ function GoogleStarSvg({ filled = true, size = 18 }) {
|
|
|
56
56
|
return ((0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 24 24", style: {
|
|
57
57
|
width: `${size}px`,
|
|
58
58
|
height: `${size}px`,
|
|
59
|
-
fill: filled ? '#
|
|
60
|
-
color: filled ? '#
|
|
59
|
+
fill: filled ? '#fa7014' : '#dadce0',
|
|
60
|
+
color: filled ? '#fa7014' : '#dadce0',
|
|
61
61
|
flexShrink: 0,
|
|
62
62
|
}, "aria-hidden": "true", children: (0, jsx_runtime_1.jsx)("path", { d: "M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" }) }));
|
|
63
63
|
}
|
|
64
|
-
function FeedbackCard({ item, index, maxStars, badgeIcon, cardClassName, }) {
|
|
64
|
+
function FeedbackCard({ item, index, maxStars, badgeIcon, badgeTitle, cardClassName, }) {
|
|
65
65
|
const currentItem = item || {};
|
|
66
66
|
const rawRating = currentItem.rating != null && currentItem.rating !== '' ? currentItem.rating : 5;
|
|
67
67
|
const initialRating = Math.min(Math.max(Math.round(Number(rawRating) || 5), 1), maxStars);
|
|
@@ -101,26 +101,23 @@ function FeedbackCard({ item, index, maxStars, badgeIcon, cardClassName, }) {
|
|
|
101
101
|
'https://images.unsplash.com/photo-1534528741775-53994a69daeb?q=80&w=300&auto=format&fit=crop');
|
|
102
102
|
const reviewerComment = String(currentItem.comment || '');
|
|
103
103
|
const reviewerDate = String(currentItem.date || 'Recent review');
|
|
104
|
-
return ((0, jsx_runtime_1.jsx)("div", { "data-preview-item-path": `feedback.feedbacks[${index}]`, className: `p-6 sm:p-7 rounded-2xl bg-gradient-to-b from-slate-900/
|
|
104
|
+
return ((0, jsx_runtime_1.jsx)("div", { "data-preview-item-path": `feedback.feedbacks[${index}]`, className: `p-6 sm:p-7 rounded-2xl sm:rounded-3xl bg-white border border-slate-200 hover:border-slate-300 shadow-sm hover:shadow-md dark:bg-gradient-to-b dark:from-slate-900/70 dark:to-slate-950/90 dark:border-slate-800/80 dark:hover:border-slate-700 dark:shadow-xl transition-all duration-300 flex flex-col justify-between space-y-4 ${cardClassName || ''}`.trim(), children: (0, jsx_runtime_1.jsxs)("div", { className: "space-y-3.5", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between gap-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)("img", { src: reviewerAvatar, alt: reviewerName, "data-preview-field-path": `feedback.feedbacks[${index}].avatar`, className: "w-11 h-11 rounded-full object-cover border border-slate-200 dark:border-slate-700 shadow-sm" }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("span", { "data-preview-field-path": `feedback.feedbacks[${index}].name`, className: "block text-sm font-black text-slate-900 dark:text-white", children: reviewerName }), (0, jsx_runtime_1.jsx)("span", { "data-preview-field-path": `feedback.feedbacks[${index}].date`, className: "block text-xs text-slate-500 dark:text-slate-400", children: reviewerDate })] })] }), (() => {
|
|
105
|
+
const itemCustomIcon = currentItem?.badgeIcon || currentItem?.platformIcon;
|
|
106
|
+
const finalCardIcon = typeof itemCustomIcon === 'string' && itemCustomIcon.trim() ? itemCustomIcon : (badgeIcon || DEFAULT_GOOGLE_ICON);
|
|
107
|
+
const cardIconFieldPath = typeof itemCustomIcon === 'string' && itemCustomIcon.trim()
|
|
108
|
+
? `feedback.feedbacks[${index}].badgeIcon`
|
|
109
|
+
: `feedback.badgeIcon`;
|
|
110
|
+
return ((0, jsx_runtime_1.jsx)("img", { src: finalCardIcon, alt: badgeTitle || 'Review Platform', "data-preview-field-path": cardIconFieldPath, className: "w-5 h-5 object-contain opacity-90 shrink-0 cursor-pointer", style: {
|
|
111
|
+
width: '20px',
|
|
112
|
+
height: '20px',
|
|
113
|
+
minWidth: '20px',
|
|
114
|
+
minHeight: '20px',
|
|
115
|
+
maxWidth: '20px',
|
|
116
|
+
maxHeight: '20px',
|
|
117
|
+
}, title: "Click to upload/change review platform icon (Google, Twitter, Trustpilot, etc.)" }));
|
|
118
|
+
})()] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between gap-2 pt-1", children: [(0, jsx_runtime_1.jsxs)("div", { className: "inline-flex items-center gap-2 p-1 -ml-1 rounded-lg cursor-pointer transition-all hover:bg-amber-500/10 group", onClick: handleFocusRating, title: `Rating: ${currentRating} of ${maxStars} (Click to edit)`, children: [(0, jsx_runtime_1.jsx)("div", { className: "flex items-center gap-[2px]", "data-fivora-stars-row": "true", children: Array.from({ length: maxStars }).map((_, sIdx) => ((0, jsx_runtime_1.jsx)(GoogleStarSvg, { filled: sIdx < currentRating, size: 18 }, sIdx))) }), (0, jsx_runtime_1.jsx)("span", { ref: ratingRef, "data-preview-field-path": `feedback.feedbacks[${index}].rating`, "data-fivora-rating-text": "true", className: "text-xs font-black text-amber-600 bg-amber-500/10 px-1.5 py-0.5 rounded-md border border-amber-500/20 dark:text-amber-400 group-hover:bg-amber-500/20 transition-colors tabular-nums", title: "Star count (1-5)", children: currentRating })] }), (0, jsx_runtime_1.jsxs)("div", { className: "inline-flex items-center gap-1 text-[11px] font-bold text-blue-600 bg-blue-50 dark:text-blue-400 dark:bg-blue-500/10 px-2.5 py-1 rounded-full border border-blue-500/20", children: [(0, jsx_runtime_1.jsx)("svg", { className: "w-3 h-3 fill-current", 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-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" }) }), (0, jsx_runtime_1.jsx)("span", { children: "Verified" })] })] }), (0, jsx_runtime_1.jsxs)("p", { "data-preview-field-path": `feedback.feedbacks[${index}].comment`, className: "text-sm sm:text-base text-slate-700 dark:text-slate-300 leading-relaxed italic font-normal pt-1", children: ["\u201C", reviewerComment, "\u201D"] })] }) }));
|
|
105
119
|
}
|
|
106
|
-
function EditableGoogleFeedback({
|
|
107
|
-
const items =
|
|
108
|
-
|
|
109
|
-
if (list.length === 0) {
|
|
110
|
-
return DEFAULT_FEEDBACKS;
|
|
111
|
-
}
|
|
112
|
-
return list.map((item, index) => {
|
|
113
|
-
const fallback = DEFAULT_FEEDBACKS[index % DEFAULT_FEEDBACKS.length] || DEFAULT_FEEDBACKS[0];
|
|
114
|
-
if (!item || typeof item !== 'object') {
|
|
115
|
-
return { ...fallback, id: `fallback-${index}` };
|
|
116
|
-
}
|
|
117
|
-
return {
|
|
118
|
-
...fallback,
|
|
119
|
-
...item,
|
|
120
|
-
id: item.id || `feedback-${index}`,
|
|
121
|
-
rating: item.rating !== undefined && item.rating !== null ? item.rating : 5,
|
|
122
|
-
};
|
|
123
|
-
});
|
|
124
|
-
}, [feedbacks]);
|
|
125
|
-
return ((0, jsx_runtime_1.jsx)("section", { "data-design-section": "google-feedback", className: `editable-google-feedback w-full ${className}`.trim(), style: style, ...props, children: (0, jsx_runtime_1.jsxs)("div", { className: "w-full mx-auto px-4 sm:px-6 lg:px-10", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col md:flex-row md:items-end justify-between gap-6 mb-10 sm:mb-14", children: [(0, jsx_runtime_1.jsxs)("div", { className: "max-w-2xl space-y-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "inline-flex items-center gap-2.5 px-3.5 py-1.5 rounded-full bg-slate-900/80 border border-slate-800 shadow-sm", children: [(0, jsx_runtime_1.jsx)("img", { src: badgeIcon || DEFAULT_GOOGLE_ICON, alt: "Google", "data-preview-field-path": `feedback.badgeIcon`, className: "w-4 h-4 object-contain" }), (0, jsx_runtime_1.jsx)("span", { "data-preview-field-path": `feedback.badgeTitle`, className: "text-xs uppercase tracking-widest font-black text-white", children: badgeTitle }), (0, jsx_runtime_1.jsx)("span", { className: "w-1 h-1 rounded-full bg-slate-700" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1.5", children: [(0, jsx_runtime_1.jsx)("span", { "data-preview-field-path": `feedback.badgeRating`, className: "text-xs font-black text-amber-400", children: badgeRating }), (0, jsx_runtime_1.jsx)("div", { className: "flex items-center gap-[2px]", children: Array.from({ length: 5 }).map((_, sIdx) => ((0, jsx_runtime_1.jsx)(GoogleStarSvg, { filled: true, size: 14 }, sIdx))) })] }), (0, jsx_runtime_1.jsxs)("span", { className: "text-[11px] text-slate-400 font-medium sm:inline", children: ["(", (0, jsx_runtime_1.jsx)("span", { "data-preview-field-path": `feedback.badgeReviewsCount`, children: badgeReviewsCount }), ")"] })] }), (0, jsx_runtime_1.jsx)("h2", { "data-preview-field-path": `feedback.heading`, className: "font-heading text-2xl xs:text-3xl sm:text-4xl lg:text-5xl font-black text-white tracking-tight", children: heading }), (0, jsx_runtime_1.jsx)("p", { "data-preview-field-path": `feedback.subheading`, className: "text-xs sm:text-base text-slate-400 leading-relaxed", children: subheading })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex flex-col items-end text-right md:flex", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("span", { "data-preview-field-path": `feedback.badgeRating`, className: "font-heading text-4xl font-black text-amber-400", children: badgeRating }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-start gap-0.5", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex items-center gap-[2px]", children: Array.from({ length: 5 }).map((_, sIdx) => ((0, jsx_runtime_1.jsx)(GoogleStarSvg, { filled: true, size: 16 }, sIdx))) }), (0, jsx_runtime_1.jsx)("span", { "data-preview-field-path": `feedback.badgeReviewsCount`, className: "text-xs text-slate-400 font-bold", children: badgeReviewsCount })] })] }) })] }), (0, jsx_runtime_1.jsx)("div", { "data-preview-list-path": `feedback.feedbacks`, className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6", children: items.map((item, index) => ((0, jsx_runtime_1.jsx)(FeedbackCard, { item: item, index: index, maxStars: maxStars, badgeIcon: badgeIcon, cardClassName: cardClassName }, item.id || String(index)))) })] }) }));
|
|
120
|
+
function EditableGoogleFeedback({ heading = 'Loved by Customers Worldwide', subheading = 'Real stories and verified 5-star reviews from our official Google Business profile.', badgeTitle = 'Google Reviews', badgeRating = '4.9', badgeReviewsCount = '128 verified reviews', badgeIcon, feedbacks = DEFAULT_FEEDBACKS, maxStars = 5, className = '', cardClassName = '', style, basePath = 'feedback', ...props }) {
|
|
121
|
+
const items = Array.isArray(feedbacks) && feedbacks.length > 0 ? feedbacks : DEFAULT_FEEDBACKS;
|
|
122
|
+
return ((0, jsx_runtime_1.jsx)("section", { "data-preview-page-key": basePath, className: `editable-google-feedback w-full py-12 sm:py-20 ${className}`.trim(), style: style, ...props, children: (0, jsx_runtime_1.jsxs)("div", { className: "max-w-[1600px] mx-auto px-4 sm:px-6 lg:px-10", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col md:flex-row md:items-end justify-between gap-6 mb-10 sm:mb-14", children: [(0, jsx_runtime_1.jsxs)("div", { className: "max-w-2xl space-y-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "inline-flex items-center gap-2.5 px-3.5 py-1.5 rounded-full bg-slate-100 border border-slate-200 dark:bg-slate-900/80 dark:border-slate-800 shadow-sm", children: [(0, jsx_runtime_1.jsx)("img", { src: badgeIcon || DEFAULT_GOOGLE_ICON, alt: "Google", "data-preview-field-path": `feedback.badgeIcon`, className: "w-4 h-4 object-contain" }), (0, jsx_runtime_1.jsx)("span", { "data-preview-field-path": `feedback.badgeTitle`, className: "text-xs uppercase tracking-widest font-black text-slate-800 dark:text-slate-200", children: badgeTitle }), (0, jsx_runtime_1.jsx)("span", { className: "w-1 h-1 rounded-full bg-slate-400 dark:bg-slate-600" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1.5", children: [(0, jsx_runtime_1.jsx)("span", { "data-preview-field-path": `feedback.badgeRating`, className: "text-xs font-black text-amber-600 dark:text-amber-400", children: badgeRating }), (0, jsx_runtime_1.jsx)("div", { className: "flex items-center gap-[2px]", children: Array.from({ length: 5 }).map((_, sIdx) => ((0, jsx_runtime_1.jsx)(GoogleStarSvg, { filled: true, size: 14 }, sIdx))) })] }), (0, jsx_runtime_1.jsxs)("span", { className: "text-[11px] text-slate-500 dark:text-slate-400 font-medium hidden sm:inline", children: ["(", (0, jsx_runtime_1.jsx)("span", { "data-preview-field-path": `feedback.badgeReviewsCount`, children: badgeReviewsCount }), ")"] })] }), (0, jsx_runtime_1.jsx)("h2", { "data-preview-field-path": `feedback.heading`, className: "font-heading text-2xl xs:text-3xl sm:text-4xl lg:text-5xl font-black text-slate-900 dark:text-white tracking-tight", children: heading }), (0, jsx_runtime_1.jsx)("p", { "data-preview-field-path": `feedback.subheading`, className: "text-xs sm:text-base text-slate-600 dark:text-slate-400 leading-relaxed", children: subheading })] }), (0, jsx_runtime_1.jsx)("div", { className: "hidden md:flex flex-col items-end text-right", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("span", { "data-preview-field-path": `feedback.badgeRating`, className: "font-heading text-4xl font-black text-amber-500 dark:text-amber-400", children: badgeRating }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-start gap-0.5", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex items-center gap-[2px]", children: Array.from({ length: 5 }).map((_, sIdx) => ((0, jsx_runtime_1.jsx)(GoogleStarSvg, { filled: true, size: 16 }, sIdx))) }), (0, jsx_runtime_1.jsx)("span", { "data-preview-field-path": `feedback.badgeReviewsCount`, className: "text-xs text-slate-500 dark:text-slate-400 font-bold", children: badgeReviewsCount })] })] }) })] }), (0, jsx_runtime_1.jsx)("div", { "data-preview-list-path": `feedback.feedbacks`, className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6", children: items.map((item, index) => ((0, jsx_runtime_1.jsx)(FeedbackCard, { item: item, index: index, maxStars: maxStars, badgeIcon: badgeIcon, badgeTitle: badgeTitle, cardClassName: cardClassName }, item.id || String(index)))) })] }) }));
|
|
126
123
|
}
|
|
@@ -45,11 +45,11 @@ function EditableProductGrid({ sectionPath = 'home', listPath = 'products', titl
|
|
|
45
45
|
const dClass = d === 3 ? 'lg:grid-cols-3' : d === 2 ? 'lg:grid-cols-2' : 'lg:grid-cols-4';
|
|
46
46
|
return `${mClass} ${tClass} ${dClass}`;
|
|
47
47
|
}, [columns]);
|
|
48
|
-
return ((0, jsx_runtime_1.jsxs)("section", { "data-preview-page-key": sectionPath, className: `editable-product-grid w-
|
|
48
|
+
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-emerald-600 dark: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-slate-900 dark:text-white leading-tight", children: title })] }), resolvedCategories.length > 1 && ((0, jsx_runtime_1.jsx)("div", { className: "flex flex-wrap items-center gap-2", children: resolvedCategories.map((cat) => {
|
|
49
49
|
const isActive = activeCategory.toLowerCase() === cat.toLowerCase();
|
|
50
50
|
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
|
|
51
|
-
? 'bg-
|
|
52
|
-
: 'bg-slate-900/60 text-slate-400 hover:text-white border
|
|
51
|
+
? 'bg-slate-900 text-white dark:bg-white dark:text-slate-950 shadow-md scale-102 font-extrabold'
|
|
52
|
+
: 'bg-slate-100 text-slate-600 hover:text-slate-900 border border-slate-200 hover:bg-slate-200/70 dark:bg-slate-900/60 dark:text-slate-400 dark:hover:text-white dark:border-slate-800/80 dark:hover:bg-slate-850'}`, children: cat }, cat));
|
|
53
53
|
}) }))] }), filteredProducts.length > 0 ? ((0, jsx_runtime_1.jsx)("div", { ...(listPath ? { 'data-preview-list-path': listPath } : {}), className: `deneb-product-grid grid ${gridColClasses} gap-6 sm:gap-8`, children: filteredProducts.map((product, idx) => {
|
|
54
54
|
const itemPath = listPath
|
|
55
55
|
? `${listPath}[${idx}]`
|
|
@@ -11,11 +11,11 @@ function EditableTestimonialCard({ itemPath, item, as: Component = 'div', classN
|
|
|
11
11
|
const avatar = String(item?.avatar || '');
|
|
12
12
|
const rating = Number(item?.rating || 5);
|
|
13
13
|
const cardStyle = {
|
|
14
|
-
backgroundColor: '#ffffff',
|
|
15
|
-
border: '1px solid #f1f5f9',
|
|
14
|
+
backgroundColor: 'var(--color-surface, #ffffff)',
|
|
15
|
+
border: '1px solid var(--color-border, #f1f5f9)',
|
|
16
16
|
borderRadius: '16px',
|
|
17
17
|
padding: '2rem',
|
|
18
|
-
boxShadow: '0 4px 20px -2px rgba(0, 0, 0, 0.04)',
|
|
18
|
+
boxShadow: 'var(--card-shadow, 0 4px 20px -2px rgba(0, 0, 0, 0.04))',
|
|
19
19
|
display: 'flex',
|
|
20
20
|
flexDirection: 'column',
|
|
21
21
|
justifyContent: 'space-between',
|
|
@@ -15,4 +15,3 @@ export interface EditableTestimonialSectionProps extends React.HTMLAttributes<HT
|
|
|
15
15
|
cardClassName?: string;
|
|
16
16
|
}
|
|
17
17
|
export declare function EditableTestimonialSection({ basePath, badge, heading, subheading, testimonials, maxStars, className, cardClassName, style, ...props }: EditableTestimonialSectionProps): React.JSX.Element;
|
|
18
|
-
export type { TestimonialItem };
|
|
@@ -37,8 +37,8 @@ function StarSvg({ filled = true, size = 16 }) {
|
|
|
37
37
|
return ((0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 24 24", style: {
|
|
38
38
|
width: `${size}px`,
|
|
39
39
|
height: `${size}px`,
|
|
40
|
-
fill: filled ? '#
|
|
41
|
-
color: filled ? '#
|
|
40
|
+
fill: filled ? '#fa7014' : '#dadce0',
|
|
41
|
+
color: filled ? '#fa7014' : '#dadce0',
|
|
42
42
|
flexShrink: 0,
|
|
43
43
|
}, "aria-hidden": "true", children: (0, jsx_runtime_1.jsx)("path", { d: "M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" }) }));
|
|
44
44
|
}
|
|
@@ -81,9 +81,9 @@ function TestimonialCard({ item, index, maxStars, cardClassName, }) {
|
|
|
81
81
|
const authorAvatar = String(currentItem.avatar ||
|
|
82
82
|
'https://images.unsplash.com/photo-1583394838336-acd977736f90?q=80&w=300&auto=format&fit=crop');
|
|
83
83
|
const tagText = String(currentItem.tag || '');
|
|
84
|
-
return ((0, jsx_runtime_1.jsxs)("div", { "data-preview-item-path": `testimonials.testimonials[${index}]`, className: `relative p-5 sm:p-7 lg:p-8 rounded-2xl bg-gradient-to-b from-slate-900/
|
|
84
|
+
return ((0, jsx_runtime_1.jsxs)("div", { "data-preview-item-path": `testimonials.testimonials[${index}]`, className: `relative p-5 sm:p-7 lg:p-8 rounded-2xl sm:rounded-3xl bg-white border border-slate-200 hover:border-slate-300 shadow-sm hover:shadow-md dark:bg-gradient-to-b dark:from-slate-900/70 dark:to-slate-950/90 dark:border-slate-800/80 dark:hover:border-slate-700 dark:shadow-xl transition-all duration-300 flex flex-col justify-between space-y-5 min-w-0 ${cardClassName || ''}`.trim(), children: [(0, jsx_runtime_1.jsxs)("div", { className: "space-y-4 min-w-0", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-wrap items-center justify-between gap-2", children: [Boolean(currentItem.tag) && ((0, jsx_runtime_1.jsx)("span", { "data-preview-field-path": `testimonials.testimonials[${index}].tag`, className: "px-2.5 py-1 rounded-full bg-slate-100 text-slate-700 border border-slate-200 dark:bg-slate-800/80 dark:text-lime-400 dark:border-lime-400/20 text-[10px] sm:text-[11px] uppercase tracking-wider font-extrabold shrink-0", children: tagText })), (0, jsx_runtime_1.jsxs)("div", { className: "inline-flex items-center gap-1.5 p-1 -mr-1 rounded-lg cursor-pointer transition-all hover:bg-amber-500/10 group ml-auto shrink-0", onClick: handleFocusRating, title: `Rating: ${currentRating} of ${maxStars} (Click to edit)`, children: [(0, jsx_runtime_1.jsx)("div", { className: "flex items-center gap-[2px]", "data-fivora-stars-row": "true", children: Array.from({ length: maxStars }).map((_, sIdx) => ((0, jsx_runtime_1.jsx)(StarSvg, { filled: sIdx < currentRating, size: 14 }, sIdx))) }), (0, jsx_runtime_1.jsx)("span", { ref: ratingRef, "data-preview-field-path": `testimonials.testimonials[${index}].rating`, "data-fivora-rating-text": "true", className: "text-xs font-black text-amber-600 bg-amber-500/10 px-1.5 py-0.5 rounded-md border border-amber-500/20 dark:text-amber-400 group-hover:bg-amber-500/20 transition-colors tabular-nums", title: "Star count (1-5)", children: currentRating })] })] }), (0, jsx_runtime_1.jsxs)("blockquote", { "data-preview-field-path": `testimonials.testimonials[${index}].quote`, className: "font-serif-italic text-sm sm:text-base text-slate-700 dark:text-slate-300 leading-relaxed break-words", children: ["\u201C", quoteText, "\u201D"] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "pt-4 border-t border-slate-100 dark:border-slate-800 flex items-center gap-3 min-w-0", children: [(0, jsx_runtime_1.jsx)("img", { src: authorAvatar, alt: authorName, "data-preview-field-path": `testimonials.testimonials[${index}].avatar`, className: "w-10 h-10 sm:w-12 sm:h-12 rounded-full object-cover border border-slate-200 dark:border-slate-700 shadow-sm shrink-0" }), (0, jsx_runtime_1.jsxs)("div", { className: "min-w-0 flex-1", children: [(0, jsx_runtime_1.jsx)("h4", { "data-preview-field-path": `testimonials.testimonials[${index}].author`, className: "font-heading font-black text-sm sm:text-base text-slate-900 dark:text-white truncate", children: authorName }), (0, jsx_runtime_1.jsx)("p", { "data-preview-field-path": `testimonials.testimonials[${index}].role`, className: "text-xs text-slate-500 dark:text-slate-400 font-medium leading-snug line-clamp-2", children: authorRole })] })] })] }));
|
|
85
85
|
}
|
|
86
|
-
function EditableTestimonialSection({ basePath = 'testimonials', badge = '
|
|
86
|
+
function EditableTestimonialSection({ basePath = 'testimonials', badge = 'WORDS OF ACCLAIM', heading = 'WHAT THE CRITICS ARE SAYING', subheading = 'Reflections from international cuppers, culinary masters, and dedicated regulars.', testimonials = DEFAULT_TESTIMONIALS, maxStars = 5, className = '', cardClassName = '', style, ...props }) {
|
|
87
87
|
const items = (0, react_1.useMemo)(() => {
|
|
88
88
|
const list = Array.isArray(testimonials) ? testimonials : [];
|
|
89
89
|
if (list.length === 0) {
|
|
@@ -102,5 +102,5 @@ function EditableTestimonialSection({ basePath = 'testimonials', badge = 'CRITIC
|
|
|
102
102
|
};
|
|
103
103
|
});
|
|
104
104
|
}, [testimonials]);
|
|
105
|
-
return ((0, jsx_runtime_1.jsx)("section", { "data-design-section":
|
|
105
|
+
return ((0, jsx_runtime_1.jsx)("section", { "data-preview-page-key": basePath, "data-design-section": basePath, className: `editable-testimonial-section w-full py-12 sm:py-20 px-3 sm:px-6 lg:px-8 ${className}`.trim(), style: style, ...props, children: (0, jsx_runtime_1.jsxs)("div", { className: "w-full mx-auto", children: [(0, jsx_runtime_1.jsxs)("div", { className: "text-center max-w-3xl mx-auto space-y-3 mb-10 sm:mb-14 px-2", children: [badge && ((0, jsx_runtime_1.jsx)("div", { className: "inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-slate-100 text-slate-800 border border-slate-200 dark:bg-slate-800/80 dark:text-lime-400 dark:border-lime-400/20 text-xs uppercase tracking-widest font-black shadow-sm", children: (0, jsx_runtime_1.jsx)("span", { "data-preview-field-path": `testimonials.badge`, children: badge }) })), (0, jsx_runtime_1.jsx)("h2", { "data-preview-field-path": `testimonials.heading`, className: "font-heading text-2xl xs:text-3xl sm:text-4xl lg:text-5xl font-black text-slate-900 dark:text-white tracking-tight", children: heading }), (0, jsx_runtime_1.jsx)("p", { "data-preview-field-path": `testimonials.subheading`, className: "text-xs sm:text-base text-slate-600 dark:text-slate-400 leading-relaxed max-w-2xl mx-auto", children: subheading })] }), (0, jsx_runtime_1.jsx)("div", { "data-preview-list-path": `testimonials.testimonials`, className: "grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-5 sm:gap-7 [grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr))] w-full", children: items.map((item, index) => ((0, jsx_runtime_1.jsx)(TestimonialCard, { item: item, index: index, maxStars: maxStars, cardClassName: cardClassName }, item.id || String(index)))) })] }) }));
|
|
106
106
|
}
|
package/dist/TrustBadges.js
CHANGED
|
@@ -58,9 +58,9 @@ function TrustBadges({ fieldPath = 'content.trustBadges', title, subtitle, badge
|
|
|
58
58
|
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" }) }));
|
|
59
59
|
}
|
|
60
60
|
};
|
|
61
|
-
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'
|
|
61
|
+
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 dark:text-white", children: title })), subtitle && ((0, jsx_runtime_1.jsx)("p", { className: "mt-1 text-sm text-slate-600 dark:text-slate-400 max-w-xl mx-auto", children: subtitle }))] })), (0, jsx_runtime_1.jsx)("div", { className: variant === 'inline'
|
|
62
62
|
? 'flex flex-wrap items-center justify-around gap-6'
|
|
63
63
|
: 'deneb-trust-grid 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'
|
|
64
|
-
? 'bg-white border border-slate-200/80 shadow-sm hover:shadow-md'
|
|
65
|
-
: '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))) })] }));
|
|
64
|
+
? 'bg-white border border-slate-200/80 shadow-sm hover:shadow-md dark:bg-slate-900/60 dark:border-slate-800 dark:hover:border-slate-700'
|
|
65
|
+
: '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 dark:bg-slate-800/80 dark:border-slate-700 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 dark:text-white leading-tight", children: badge.title }), (0, jsx_runtime_1.jsx)("p", { className: "mt-1 text-xs text-slate-500 dark:text-slate-400 leading-relaxed", children: badge.description })] })] }, badge.id))) })] }));
|
|
66
66
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@deneb-ui/ui",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.66",
|
|
4
4
|
"description": "Visual-first React component library for editable commerce storefronts. Built for Next.js and Fivora.",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -50,7 +50,7 @@
|
|
|
50
50
|
],
|
|
51
51
|
"license": "MIT",
|
|
52
52
|
"dependencies": {
|
|
53
|
-
"@deneb-ui/core": "^2.0.
|
|
53
|
+
"@deneb-ui/core": "^2.0.66"
|
|
54
54
|
},
|
|
55
55
|
"peerDependencies": {
|
|
56
56
|
"react": "^18.0.0 || ^19.0.0",
|