@deneb-ui/ui 2.0.39 → 2.0.40

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.
Files changed (9) hide show
  1. package/dist/EditableProductCard.d.ts +20 -0
  2. package/dist/EditableProductCard.js +5 -0
  3. package/dist/EditableProductDetail.d.ts +17 -0
  4. package/dist/EditableProductDetail.js +13 -4
  5. package/dist/utils/index.d.ts +1 -0
  6. package/dist/utils/index.js +1 -0
  7. package/dist/utils/productOptions.d.ts +74 -0
  8. package/dist/utils/productOptions.js +174 -0
  9. package/package.json +2 -2
package/dist/EditableProductCard.d.ts CHANGED
@@ -1,16 +1,36 @@
1
1
  import React from 'react';
2
+ import { MeasurementUnit } from './utils/productOptions';
2
3
  export interface ProductItem {
3
4
  id?: string | number;
4
5
  name?: string;
5
6
  title?: string;
7
+ brand?: string;
6
8
  price?: string | number;
7
9
  originalPrice?: string | number;
8
10
  description?: string;
9
11
  category?: string;
10
12
  imageUrl?: string;
11
13
  image?: string;
14
+ images?: string[];
12
15
  badge?: string;
13
16
  rating?: number | string;
17
+ reviewsCount?: number | string;
18
+ isNew?: boolean;
19
+ isBestSeller?: boolean;
20
+ unit?: MeasurementUnit;
21
+ measurement?: string;
22
+ optionsLabel?: string;
23
+ options?: (string | number)[] | string;
24
+ optionsText?: string;
25
+ sizes?: (string | number)[] | string;
26
+ sizesText?: string;
27
+ sizesLabel?: string;
28
+ colors?: Array<string | {
29
+ name: string;
30
+ hex?: string;
31
+ }> | string;
32
+ colorsText?: string;
33
+ colorsLabel?: string;
14
34
  [key: string]: unknown;
15
35
  }
16
36
  export type ProductCardVariant = 'modern-glass' | 'classic' | 'minimal' | 'horizontal';
package/dist/EditableProductCard.js CHANGED
@@ -102,6 +102,11 @@ function EditableProductCard({ itemPath, product, cardVariant = 'modern-glass',
102
102
  fontSize: '0.875rem',
103
103
  textDecoration: 'line-through',
104
104
  color: 'var(--muted-text, #94a3b8)',
105
+ } })) : null, product?.measurement ? ((0, jsx_runtime_1.jsx)(EditableText_1.EditableText, { as: "span", id: `${itemPath}.measurement`, defaultValue: `/ ${String(product.measurement)}`, style: {
106
+ fontSize: '0.8rem',
107
+ fontWeight: 500,
108
+ color: 'var(--muted-text, #64748b)',
109
+ marginLeft: '0.25rem',
105
110
  } })) : null] })), actionSlot ? ((0, jsx_runtime_1.jsx)("div", { children: actionSlot })) : ((0, jsx_runtime_1.jsx)("button", { type: "button", style: {
106
111
  backgroundColor: 'var(--brand-color, #2563eb)',
107
112
  color: '#ffffff',
package/dist/EditableProductDetail.d.ts CHANGED
@@ -1,8 +1,11 @@
1
1
  import React from 'react';
2
+ import { MeasurementUnit } from './utils/productOptions';
2
3
  export interface ProductDetailItem {
3
4
  id?: string;
4
5
  name?: string;
5
6
  title?: string;
7
+ brand?: string;
8
+ category?: string;
6
9
  price?: string | number;
7
10
  originalPrice?: string | number;
8
11
  description?: string;
@@ -23,6 +26,20 @@ export interface ProductDetailItem {
23
26
  relatedTitle?: string;
24
27
  whatsappNumber?: string;
25
28
  whatsappMessage?: string;
29
+ unit?: MeasurementUnit;
30
+ measurement?: string;
31
+ optionsLabel?: string;
32
+ options?: (string | number)[];
33
+ optionsText?: string;
34
+ sizes?: (string | number)[] | string;
35
+ sizesText?: string;
36
+ sizesLabel?: string;
37
+ colors?: Array<string | {
38
+ name: string;
39
+ hex?: string;
40
+ }> | string;
41
+ colorsText?: string;
42
+ colorsLabel?: string;
26
43
  [key: string]: unknown;
27
44
  }
28
45
  export interface EditableProductDetailProps extends React.HTMLAttributes<HTMLElement> {
package/dist/EditableProductDetail.js CHANGED
@@ -4,6 +4,7 @@ exports.EditableProductDetail = EditableProductDetail;
4
4
  const jsx_runtime_1 = require("react/jsx-runtime");
5
5
  const react_1 = require("react");
6
6
  const utils_1 = require("./utils");
7
+ const productOptions_1 = require("./utils/productOptions");
7
8
  const urls_1 = require("./utils/urls");
8
9
  /**
9
10
  * EditableProductDetail is an elite, fully calibrated Single Product View component
@@ -26,8 +27,15 @@ function EditableProductDetail({ sectionPath = 'product', product, sizes = ['40'
26
27
  const images = (product.gallery && product.gallery.length > 0)
27
28
  ? product.gallery
28
29
  : [product.featuredImage || product.imageUrl || '/products/vanta-aero-x.jpg'];
30
+ const resolved = (0, productOptions_1.resolveProductOptions)(product);
31
+ const effectiveOptions = product.options || product.optionsText
32
+ ? resolved.options
33
+ : (product.sizes || product.sizesText)
34
+ ? resolved.options
35
+ : sizes;
36
+ const effectiveOptionsLabel = resolved.optionsLabel || 'Available Sizes';
29
37
  const [activeImage, setActiveImage] = (0, react_1.useState)(images[0] || '');
30
- const [selectedSize, setSelectedSize] = (0, react_1.useState)(sizes[0] || '');
38
+ const [selectedSize, setSelectedSize] = (0, react_1.useState)(effectiveOptions[0] || '');
31
39
  const [selectedColor, setSelectedColor] = (0, react_1.useState)(colors[0]?.name || '');
32
40
  const [activeTab, setActiveTab] = (0, react_1.useState)('specs');
33
41
  const name = String(product.name || product.title || 'Product Title');
@@ -39,14 +47,15 @@ function EditableProductDetail({ sectionPath = 'product', product, sizes = ['40'
39
47
  const shippingTitle = String(product.shippingTitle || 'Shipping & Returns');
40
48
  const shippingSummary = String(product.shippingSummary || 'Free Islandwide Delivery within 2-3 business days. Cash on delivery available.');
41
49
  const shippingReturns = String(product.shippingReturns || '14-day hassle-free exchanges for unworn items in original packaging.');
50
+ const orderSnippet = resolved.formatOrderSnippet(selectedSize, selectedColor);
42
51
  const resolvedWhatsappUrl = whatsappUrl || (product.whatsappNumber
43
- ? (0, urls_1.createWhatsAppUrl)(product.whatsappNumber, product.whatsappMessage || `Hi, I would like to order ${name} (${selectedSize}, ${selectedColor}) - ${price}`)
52
+ ? (0, urls_1.createWhatsAppUrl)(product.whatsappNumber, product.whatsappMessage || `Hi, I would like to order ${name}${orderSnippet ? ` ${orderSnippet}` : ''} - ${price}`)
44
53
  : '');
45
54
  return ((0, jsx_runtime_1.jsx)("section", { "data-preview-page-key": sectionPath, className: `editable-product-detail max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 ${className}`.trim(), style: style, ...props, children: (0, jsx_runtime_1.jsxs)("div", { className: "grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-16 items-start", children: [(0, jsx_runtime_1.jsxs)("div", { className: "lg:col-span-7 flex flex-col-reverse md:flex-row gap-4", children: [images.length > 1 && ((0, jsx_runtime_1.jsx)("div", { className: "deneb-product-detail-gallery flex md:flex-col gap-3 overflow-x-auto md:overflow-y-auto max-h-[580px] pb-2 md:pb-0 scrollbar-none", children: images.map((img, idx) => ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => setActiveImage(img), className: `w-20 h-20 sm:w-24 sm:h-24 rounded-2xl overflow-hidden border-2 transition-all duration-200 flex-shrink-0 bg-slate-900/40 p-2 ${activeImage === img
46
55
  ? 'border-brand-primary scale-98 shadow-md'
47
56
  : 'border-slate-800/80 opacity-60 hover:opacity-100 hover:border-slate-700'}`, children: (0, jsx_runtime_1.jsx)("img", { src: (0, utils_1.withBasePath)(img), alt: "", className: "w-full h-full object-contain" }) }, idx))) })), (0, jsx_runtime_1.jsxs)("div", { className: "relative flex-1 aspect-square rounded-3xl bg-gradient-to-b from-slate-900/50 to-slate-950/80 border border-slate-800/80 p-8 flex items-center justify-center overflow-hidden group", children: [badge && ((0, jsx_runtime_1.jsx)("span", { "data-preview-field-path": `${sectionPath}.badge`, className: "absolute top-6 left-6 z-10 px-3.5 py-1 text-xs font-black tracking-wider uppercase rounded-full bg-lime-400 text-slate-950 shadow-lg", children: badge })), (0, jsx_runtime_1.jsx)("img", { "data-preview-field-path": `${sectionPath}.featuredImage`, src: (0, utils_1.withBasePath)(activeImage), alt: name, className: "w-full h-full object-contain transition-transform duration-500 group-hover:scale-105" })] })] }), (0, jsx_runtime_1.jsx)("div", { className: "lg:col-span-5 flex flex-col justify-between", children: (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h1", { "data-preview-field-path": `${sectionPath}.name`, className: "text-3xl sm:text-4xl font-extrabold tracking-tight text-white leading-tight", children: name }), (0, jsx_runtime_1.jsxs)("div", { className: "mt-4 flex items-baseline gap-3", children: [(0, jsx_runtime_1.jsx)("span", { "data-preview-field-path": `${sectionPath}.price`, className: "text-3xl font-black text-lime-400 tracking-tight", children: price }), product.originalPrice ? ((0, jsx_runtime_1.jsx)("span", { className: "text-lg font-medium text-slate-500 line-through", children: String(product.originalPrice) })) : null] }), description && ((0, jsx_runtime_1.jsx)("p", { "data-preview-field-path": `${sectionPath}.description`, className: "mt-6 text-base text-slate-300 leading-relaxed", children: description })), colors.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: "mt-8", children: [(0, jsx_runtime_1.jsxs)("span", { className: "block text-xs font-bold uppercase tracking-wider text-slate-400 mb-3", children: ["Color \u2014 ", (0, jsx_runtime_1.jsx)("span", { className: "text-white", children: selectedColor })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex gap-3", children: colors.map((c) => ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => setSelectedColor(c.name), className: `w-9 h-9 rounded-full border-2 transition-all p-0.5 ${selectedColor === c.name
48
57
  ? 'border-lime-400 ring-2 ring-lime-400/30 scale-105'
49
- : 'border-slate-700 hover:border-slate-500'}`, style: { backgroundColor: c.hex }, title: c.name, "aria-label": c.name }, c.name))) })] })), sizes.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: "mt-8", children: [(0, jsx_runtime_1.jsx)("span", { className: "block text-xs font-bold uppercase tracking-wider text-slate-400 mb-3", children: "Select Size" }), (0, jsx_runtime_1.jsx)("div", { className: "deneb-product-detail-sizes grid grid-cols-4 sm:grid-cols-7 gap-2", children: sizes.map((s) => ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => setSelectedSize(s), className: `py-2.5 rounded-xl font-bold text-sm transition-all duration-150 ${selectedSize === s
58
+ : 'border-slate-700 hover:border-slate-500'}`, style: { backgroundColor: c.hex }, title: c.name, "aria-label": c.name }, c.name))) })] })), effectiveOptions.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: "mt-8", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between mb-3", children: [(0, jsx_runtime_1.jsx)("span", { "data-preview-field-path": `${sectionPath}.${product.optionsLabel ? 'optionsLabel' : 'sizesLabel'}`, className: "block text-xs font-bold uppercase tracking-wider text-slate-400", children: effectiveOptionsLabel }), (0, jsx_runtime_1.jsx)("span", { className: "text-xs font-semibold text-slate-300", children: resolved.formatSelectedDisplay(selectedSize) })] }), (0, jsx_runtime_1.jsx)("div", { className: "deneb-product-detail-sizes grid grid-cols-3 sm:grid-cols-6 md:grid-cols-7 gap-2", children: effectiveOptions.map((s) => ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => setSelectedSize(s), className: `py-2.5 px-2 rounded-xl font-bold text-sm transition-all duration-150 ${selectedSize === s
50
59
  ? 'bg-white text-slate-950 shadow-md font-extrabold scale-102'
51
- : 'bg-slate-900/60 text-slate-300 border border-slate-800 hover:bg-slate-800 hover:text-white'}`, children: s }, s))) })] })), (0, jsx_runtime_1.jsxs)("div", { className: "mt-8 flex flex-col gap-3", children: [(0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => onAddToSelection?.(product, selectedSize, selectedColor), className: "w-full py-4 px-6 rounded-2xl font-black text-sm uppercase tracking-wider bg-lime-400 text-slate-950 hover:bg-lime-300 active:scale-98 transition-all duration-150 shadow-lg shadow-lime-400/20 flex items-center justify-center gap-2", children: (0, jsx_runtime_1.jsx)("span", { "data-preview-field-path": `${sectionPath}.addToSelectionLabel`, children: addToSelectionLabel }) }), resolvedWhatsappUrl && ((0, jsx_runtime_1.jsxs)("a", { href: resolvedWhatsappUrl, target: "_blank", rel: "noopener noreferrer", className: "w-full py-3.5 px-6 rounded-2xl font-bold text-sm bg-emerald-600/20 text-emerald-400 hover:bg-emerald-600/30 border border-emerald-500/30 transition-all duration-150 flex items-center justify-center gap-2", children: [(0, jsx_runtime_1.jsx)("svg", { className: "w-5 h-5 fill-current", viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { d: "M17.472 14.382c-.301-.15-1.78-.879-2.056-.98-.276-.1-.477-.15-.678.15-.201.3-.78 0.98-.956 1.18-.175.2-.351.226-.652.075-.301-.15-1.272-.469-2.423-1.496-.896-.799-1.501-1.787-1.677-2.088-.175-.301-.019-.464.132-.614.136-.135.301-.351.452-.527.15-.176.201-.301.301-.502.1-.2.05-.376-.025-.527-.075-.15-.678-1.635-.93-2.242-.244-.592-.493-.512-.678-.521-.175-.009-.376-.009-.577-.009-.201 0-.527.075-.803.376-.276.301-1.054 1.03-1.054 2.512 0 1.482 1.079 2.912 1.23 3.113.15.201 2.124 3.243 5.145 4.548.718.311 1.279.497 1.716.636.722.23 1.378.197 1.898.12.579-.087 1.78-.728 2.03-1.431.251-.703.251-1.305.176-1.431-.075-.126-.276-.201-.577-.351zM12.004 2C6.48 2 2 6.48 2 12c0 1.82.49 3.52 1.34 4.99L2 22l5.14-1.35c1.42.78 3.04 1.22 4.86 1.22 5.52 0 10-4.48 10-10S17.524 2 12.004 2z" }) }), (0, jsx_runtime_1.jsx)("span", { children: "Order Directly via WhatsApp" })] }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "mt-10 border-t border-slate-800/80 pt-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex gap-6 border-b border-slate-800 pb-3 mb-4", children: [(0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => setActiveTab('specs'), className: `text-sm font-bold tracking-wide transition-colors ${activeTab === 'specs' ? 'text-lime-400' : 'text-slate-400 hover:text-slate-200'}`, children: (0, jsx_runtime_1.jsx)("span", { "data-preview-field-path": `${sectionPath}.specsTitle`, children: specsTitle }) }), (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => setActiveTab('shipping'), className: `text-sm font-bold tracking-wide transition-colors ${activeTab === 'shipping' ? 'text-lime-400' : 'text-slate-400 hover:text-slate-200'}`, children: (0, jsx_runtime_1.jsx)("span", { "data-preview-field-path": `${sectionPath}.shippingTitle`, children: shippingTitle }) })] }), activeTab === 'specs' ? ((0, jsx_runtime_1.jsx)("div", { className: "space-y-3", children: product.specs && product.specs.length > 0 ? (product.specs.map((spec, i) => ((0, jsx_runtime_1.jsxs)("div", { className: "flex justify-between text-xs py-1 border-b border-slate-900", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-slate-400 font-medium", children: spec.label }), (0, jsx_runtime_1.jsx)("span", { className: "text-slate-200 font-semibold", children: spec.value })] }, i)))) : ((0, jsx_runtime_1.jsxs)("div", { className: "text-xs text-slate-400 space-y-2", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex justify-between py-1 border-b border-slate-800/50", children: [(0, jsx_runtime_1.jsx)("span", { children: "Upper Material" }), (0, jsx_runtime_1.jsx)("span", { className: "text-slate-200 font-semibold", children: "Engineered breathable mesh" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex justify-between py-1 border-b border-slate-800/50", children: [(0, jsx_runtime_1.jsx)("span", { children: "Midsole Technology" }), (0, jsx_runtime_1.jsx)("span", { className: "text-slate-200 font-semibold", children: "Dual-density responsive foam" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex justify-between py-1 border-b border-slate-800/50", children: [(0, jsx_runtime_1.jsx)("span", { children: "Outsole Grip" }), (0, jsx_runtime_1.jsx)("span", { className: "text-slate-200 font-semibold", children: "High-abrasion tactical rubber" })] })] })) })) : ((0, jsx_runtime_1.jsxs)("div", { className: "text-xs text-slate-300 space-y-3 leading-relaxed", children: [(0, jsx_runtime_1.jsx)("p", { "data-preview-field-path": `${sectionPath}.shippingSummary`, children: shippingSummary }), (0, jsx_runtime_1.jsx)("p", { "data-preview-field-path": `${sectionPath}.shippingReturns`, className: "text-slate-400", children: shippingReturns })] }))] })] }) })] }) }));
60
+ : 'bg-slate-900/60 text-slate-300 border border-slate-800 hover:bg-slate-800 hover:text-white'}`, children: resolved.formatOption(s) }, s))) })] })), (0, jsx_runtime_1.jsxs)("div", { className: "mt-8 flex flex-col gap-3", children: [(0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => onAddToSelection?.(product, selectedSize, selectedColor), className: "w-full py-4 px-6 rounded-2xl font-black text-sm uppercase tracking-wider bg-lime-400 text-slate-950 hover:bg-lime-300 active:scale-98 transition-all duration-150 shadow-lg shadow-lime-400/20 flex items-center justify-center gap-2", children: (0, jsx_runtime_1.jsx)("span", { "data-preview-field-path": `${sectionPath}.addToSelectionLabel`, children: addToSelectionLabel }) }), resolvedWhatsappUrl && ((0, jsx_runtime_1.jsxs)("a", { href: resolvedWhatsappUrl, target: "_blank", rel: "noopener noreferrer", className: "w-full py-3.5 px-6 rounded-2xl font-bold text-sm bg-emerald-600/20 text-emerald-400 hover:bg-emerald-600/30 border border-emerald-500/30 transition-all duration-150 flex items-center justify-center gap-2", children: [(0, jsx_runtime_1.jsx)("svg", { className: "w-5 h-5 fill-current", viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { d: "M17.472 14.382c-.301-.15-1.78-.879-2.056-.98-.276-.1-.477-.15-.678.15-.201.3-.78 0.98-.956 1.18-.175.2-.351.226-.652.075-.301-.15-1.272-.469-2.423-1.496-.896-.799-1.501-1.787-1.677-2.088-.175-.301-.019-.464.132-.614.136-.135.301-.351.452-.527.15-.176.201-.301.301-.502.1-.2.05-.376-.025-.527-.075-.15-.678-1.635-.93-2.242-.244-.592-.493-.512-.678-.521-.175-.009-.376-.009-.577-.009-.201 0-.527.075-.803.376-.276.301-1.054 1.03-1.054 2.512 0 1.482 1.079 2.912 1.23 3.113.15.201 2.124 3.243 5.145 4.548.718.311 1.279.497 1.716.636.722.23 1.378.197 1.898.12.579-.087 1.78-.728 2.03-1.431.251-.703.251-1.305.176-1.431-.075-.126-.276-.201-.577-.351zM12.004 2C6.48 2 2 6.48 2 12c0 1.82.49 3.52 1.34 4.99L2 22l5.14-1.35c1.42.78 3.04 1.22 4.86 1.22 5.52 0 10-4.48 10-10S17.524 2 12.004 2z" }) }), (0, jsx_runtime_1.jsx)("span", { children: "Order Directly via WhatsApp" })] }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "mt-10 border-t border-slate-800/80 pt-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex gap-6 border-b border-slate-800 pb-3 mb-4", children: [(0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => setActiveTab('specs'), className: `text-sm font-bold tracking-wide transition-colors ${activeTab === 'specs' ? 'text-lime-400' : 'text-slate-400 hover:text-slate-200'}`, children: (0, jsx_runtime_1.jsx)("span", { "data-preview-field-path": `${sectionPath}.specsTitle`, children: specsTitle }) }), (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => setActiveTab('shipping'), className: `text-sm font-bold tracking-wide transition-colors ${activeTab === 'shipping' ? 'text-lime-400' : 'text-slate-400 hover:text-slate-200'}`, children: (0, jsx_runtime_1.jsx)("span", { "data-preview-field-path": `${sectionPath}.shippingTitle`, children: shippingTitle }) })] }), activeTab === 'specs' ? ((0, jsx_runtime_1.jsx)("div", { className: "space-y-3", children: product.specs && product.specs.length > 0 ? (product.specs.map((spec, i) => ((0, jsx_runtime_1.jsxs)("div", { className: "flex justify-between text-xs py-1 border-b border-slate-900", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-slate-400 font-medium", children: spec.label }), (0, jsx_runtime_1.jsx)("span", { className: "text-slate-200 font-semibold", children: spec.value })] }, i)))) : ((0, jsx_runtime_1.jsxs)("div", { className: "text-xs text-slate-400 space-y-2", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex justify-between py-1 border-b border-slate-800/50", children: [(0, jsx_runtime_1.jsx)("span", { children: "Upper Material" }), (0, jsx_runtime_1.jsx)("span", { className: "text-slate-200 font-semibold", children: "Engineered breathable mesh" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex justify-between py-1 border-b border-slate-800/50", children: [(0, jsx_runtime_1.jsx)("span", { children: "Midsole Technology" }), (0, jsx_runtime_1.jsx)("span", { className: "text-slate-200 font-semibold", children: "Dual-density responsive foam" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex justify-between py-1 border-b border-slate-800/50", children: [(0, jsx_runtime_1.jsx)("span", { children: "Outsole Grip" }), (0, jsx_runtime_1.jsx)("span", { className: "text-slate-200 font-semibold", children: "High-abrasion tactical rubber" })] })] })) })) : ((0, jsx_runtime_1.jsxs)("div", { className: "text-xs text-slate-300 space-y-3 leading-relaxed", children: [(0, jsx_runtime_1.jsx)("p", { "data-preview-field-path": `${sectionPath}.shippingSummary`, children: shippingSummary }), (0, jsx_runtime_1.jsx)("p", { "data-preview-field-path": `${sectionPath}.shippingReturns`, className: "text-slate-400", children: shippingReturns })] }))] })] }) })] }) }));
52
61
  }
package/dist/utils/index.d.ts CHANGED
@@ -1,2 +1,3 @@
1
1
  export * from './urls';
2
2
  export * from './responsive';
3
+ export * from './productOptions';
package/dist/utils/index.js CHANGED
@@ -16,3 +16,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
16
16
  Object.defineProperty(exports, "__esModule", { value: true });
17
17
  __exportStar(require("./urls"), exports);
18
18
  __exportStar(require("./responsive"), exports);
19
+ __exportStar(require("./productOptions"), exports);
package/dist/utils/productOptions.d.ts ADDED
@@ -0,0 +1,74 @@
1
+ export type MeasurementUnit = 'size' | 'g' | 'kg' | 'mg' | 'ml' | 'l' | 'pcs' | 'pack' | 'oz' | 'lb' | (string & {});
2
+ export interface ProductOptionInput {
3
+ id?: string | number;
4
+ name?: string;
5
+ title?: string;
6
+ unit?: MeasurementUnit;
7
+ measurement?: string;
8
+ optionsLabel?: string;
9
+ options?: (string | number)[];
10
+ optionsText?: string;
11
+ sizes?: (string | number)[] | string;
12
+ sizesText?: string;
13
+ sizesLabel?: string;
14
+ colors?: Array<string | {
15
+ name: string;
16
+ hex?: string;
17
+ }> | string;
18
+ colorsText?: string;
19
+ colorsLabel?: string;
20
+ [key: string]: unknown;
21
+ }
22
+ export interface ResolvedProductOptions {
23
+ /**
24
+ * The detected or specified unit, e.g. "g", "ml", "size", "pcs".
25
+ */
26
+ unit: string;
27
+ /**
28
+ * The user-facing label for the options selector.
29
+ * e.g. "Net Weight", "Volume", "Available Sizes", "Pack Size".
30
+ */
31
+ optionsLabel: string;
32
+ /**
33
+ * Normalized list of available option values (e.g. ["100g", "250g", "500g"] or ["40", "41", "42"]).
34
+ */
35
+ options: string[];
36
+ /**
37
+ * Default selected option (first option, or empty string).
38
+ */
39
+ defaultOption: string;
40
+ /**
41
+ * Whether this option represents a physical measurement (weight, volume, count).
42
+ */
43
+ isMeasurement: boolean;
44
+ /**
45
+ * Format option for button or badge rendering (e.g. "250g", "50ml", "42").
46
+ */
47
+ formatOption: (option: string | number) => string;
48
+ /**
49
+ * Format option for headline or summary display (e.g. "250g", "50ml", "Size 42").
50
+ */
51
+ formatSelectedDisplay: (option: string | number) => string;
52
+ /**
53
+ * Format an order snippet for WhatsApp or checkout (e.g. "(250g)" or "(Ivory, Size 42)").
54
+ */
55
+ formatOrderSnippet: (selectedOption?: string | number, selectedColor?: string) => string;
56
+ /**
57
+ * Available color names.
58
+ */
59
+ colors: string[];
60
+ /**
61
+ * Color selector label (e.g. "Available Colors").
62
+ */
63
+ colorsLabel: string;
64
+ /**
65
+ * Default selected color.
66
+ */
67
+ defaultColor: string;
68
+ }
69
+ /**
70
+ * Universal product option & measurement resolver.
71
+ * Handles footwear/apparel sizes, food/grocery weights (g, kg, mg),
72
+ * liquids/cosmetics volumes (ml, l), and counts (pcs, pack) seamlessly.
73
+ */
74
+ export declare function resolveProductOptions(product?: ProductOptionInput | Record<string, unknown> | null): ResolvedProductOptions;
package/dist/utils/productOptions.js ADDED
@@ -0,0 +1,174 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.resolveProductOptions = resolveProductOptions;
4
+ function parseList(value) {
5
+ if (typeof value === 'string') {
6
+ return value
7
+ .split(',')
8
+ .map((s) => s.trim())
9
+ .filter(Boolean);
10
+ }
11
+ if (Array.isArray(value)) {
12
+ return value
13
+ .map((item) => {
14
+ if (item == null)
15
+ return '';
16
+ if (typeof item === 'object' && 'name' in item && typeof item.name === 'string') {
17
+ return item.name.trim();
18
+ }
19
+ return String(item).trim();
20
+ })
21
+ .filter(Boolean);
22
+ }
23
+ return [];
24
+ }
25
+ /**
26
+ * Universal product option & measurement resolver.
27
+ * Handles footwear/apparel sizes, food/grocery weights (g, kg, mg),
28
+ * liquids/cosmetics volumes (ml, l), and counts (pcs, pack) seamlessly.
29
+ */
30
+ function resolveProductOptions(product) {
31
+ const p = (product || {});
32
+ // 1. Resolve Colors
33
+ let colors = parseList(p.colorsText);
34
+ if (!colors.length)
35
+ colors = parseList(p.colors);
36
+ const colorsLabel = (typeof p.colorsLabel === 'string' && p.colorsLabel.trim()) || 'Available Colors';
37
+ const defaultColor = colors[0] || 'Standard';
38
+ // 2. Resolve Options / Sizes
39
+ let options = parseList(p.optionsText);
40
+ if (!options.length)
41
+ options = parseList(p.options);
42
+ if (!options.length)
43
+ options = parseList(p.sizesText);
44
+ if (!options.length)
45
+ options = parseList(p.sizes);
46
+ if (!options.length && typeof p.measurement === 'string' && p.measurement.trim()) {
47
+ options = [p.measurement.trim()];
48
+ }
49
+ // 3. Detect Unit
50
+ let unit = (typeof p.unit === 'string' ? p.unit.trim().toLowerCase() : '');
51
+ if (!unit) {
52
+ // Auto-detect unit from options, measurement, or title
53
+ const probe = [
54
+ ...options,
55
+ typeof p.measurement === 'string' ? p.measurement : '',
56
+ typeof p.title === 'string' ? p.title : '',
57
+ typeof p.name === 'string' ? p.name : '',
58
+ ].join(' ');
59
+ if (/\b(\d+)\s*(mg)\b/i.test(probe)) {
60
+ unit = 'mg';
61
+ }
62
+ else if (/\b(\d+)\s*(kg)\b/i.test(probe)) {
63
+ unit = 'kg';
64
+ }
65
+ else if (/\b(\d+)\s*(g|grams?)\b/i.test(probe)) {
66
+ unit = 'g';
67
+ }
68
+ else if (/\b(\d+)\s*(ml)\b/i.test(probe)) {
69
+ unit = 'ml';
70
+ }
71
+ else if (/\b(\d+)\s*(l|litres?|liters?)\b/i.test(probe)) {
72
+ unit = 'l';
73
+ }
74
+ else if (/\b(\d+)\s*(pcs|pieces?|pack|packs?|boxes?)\b/i.test(probe)) {
75
+ unit = 'pcs';
76
+ }
77
+ else if (/\b(\d+)\s*(oz|fl\s*oz)\b/i.test(probe)) {
78
+ unit = 'oz';
79
+ }
80
+ else if (/\b(\d+)\s*(lb|lbs)\b/i.test(probe)) {
81
+ unit = 'lb';
82
+ }
83
+ else {
84
+ unit = 'size';
85
+ }
86
+ }
87
+ const isMeasurement = unit !== 'size';
88
+ // 4. Resolve Label
89
+ let optionsLabel = (typeof p.optionsLabel === 'string' && p.optionsLabel.trim()) || '';
90
+ if (!optionsLabel && typeof p.sizesLabel === 'string' && p.sizesLabel.trim()) {
91
+ optionsLabel = p.sizesLabel.trim();
92
+ }
93
+ if (!optionsLabel) {
94
+ switch (unit) {
95
+ case 'g':
96
+ case 'kg':
97
+ case 'mg':
98
+ case 'oz':
99
+ case 'lb':
100
+ optionsLabel = 'Net Weight';
101
+ break;
102
+ case 'ml':
103
+ case 'l':
104
+ optionsLabel = 'Volume';
105
+ break;
106
+ case 'pcs':
107
+ case 'pack':
108
+ optionsLabel = 'Pack Size';
109
+ break;
110
+ case 'size':
111
+ optionsLabel = 'Available Sizes';
112
+ break;
113
+ default:
114
+ optionsLabel = 'Available Options';
115
+ break;
116
+ }
117
+ }
118
+ const defaultOption = options[0] || '';
119
+ // 5. Formatter helpers
120
+ const formatOption = (option) => {
121
+ const raw = String(option ?? '').trim();
122
+ if (!raw)
123
+ return '';
124
+ if (unit === 'size')
125
+ return raw;
126
+ // Check if raw already ends with unit
127
+ const regex = new RegExp(`\\b(${unit})$`, 'i');
128
+ if (regex.test(raw))
129
+ return raw;
130
+ // If pure number and measurement unit
131
+ if (/^\d+(\.\d+)?$/.test(raw)) {
132
+ return `${raw}${unit}`;
133
+ }
134
+ return raw;
135
+ };
136
+ const formatSelectedDisplay = (option) => {
137
+ const formatted = formatOption(option);
138
+ if (!formatted)
139
+ return '';
140
+ if (unit === 'size') {
141
+ if (/^size\s+/i.test(formatted))
142
+ return formatted;
143
+ return `Size ${formatted}`;
144
+ }
145
+ return formatted;
146
+ };
147
+ const formatOrderSnippet = (selectedOption, selectedColor) => {
148
+ const cleanColor = selectedColor && selectedColor !== 'Standard' ? String(selectedColor).trim() : '';
149
+ const cleanOption = selectedOption ? formatSelectedDisplay(selectedOption) : '';
150
+ if (cleanColor && cleanOption) {
151
+ return `(${cleanColor}, ${cleanOption})`;
152
+ }
153
+ if (cleanOption) {
154
+ return `(${cleanOption})`;
155
+ }
156
+ if (cleanColor) {
157
+ return `(${cleanColor})`;
158
+ }
159
+ return '';
160
+ };
161
+ return {
162
+ unit,
163
+ optionsLabel,
164
+ options,
165
+ defaultOption,
166
+ isMeasurement,
167
+ formatOption,
168
+ formatSelectedDisplay,
169
+ formatOrderSnippet,
170
+ colors,
171
+ colorsLabel,
172
+ defaultColor,
173
+ };
174
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@deneb-ui/ui",
3
- "version": "2.0.39",
3
+ "version": "2.0.40",
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",
@@ -49,7 +49,7 @@
49
49
  ],
50
50
  "license": "MIT",
51
51
  "dependencies": {
52
- "@deneb-ui/core": "^2.0.39"
52
+ "@deneb-ui/core": "^2.0.40"
53
53
  },
54
54
  "peerDependencies": {
55
55
  "react": "^18.0.0 || ^19.0.0",