@deneb-ui/ui 2.0.71 → 2.0.73
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/PlatformProductDetail.js +1 -1
- package/dist/ThemeToggle.d.ts +11 -0
- package/dist/ThemeToggle.js +51 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +1 -0
- package/dist/location/MapLink.js +1 -1
- package/package.json +2 -2
- package/platform-contract.json +4 -1
|
@@ -301,7 +301,7 @@ function PlatformProductDetail({ productId, queryParam = DEFAULT_QUERY_PARAM, pr
|
|
|
301
301
|
retryDelays,
|
|
302
302
|
});
|
|
303
303
|
if (result.status === 'loading') {
|
|
304
|
-
return loadingFallback ?? ((0, jsx_runtime_1.jsx)("div", { role: "status", className: "mx-auto flex min-h-[40vh] max-w-7xl items-center justify-center px-4 py-16 text-sm text-slate-400", children: "Loading product\u2026" }));
|
|
304
|
+
return loadingFallback ?? ((0, jsx_runtime_1.jsx)("div", { role: "status", className: "mx-auto flex min-h-[40vh] max-w-7xl items-center justify-center px-4 py-16 text-sm text-slate-400", children: (0, jsx_runtime_1.jsx)("span", { "data-preview-static": "product-detail-loading", children: "Loading product\u2026" }) }));
|
|
305
305
|
}
|
|
306
306
|
if (result.status === 'error') {
|
|
307
307
|
return errorFallback ?? ((0, jsx_runtime_1.jsxs)("div", { className: "mx-auto flex min-h-[40vh] max-w-xl flex-col items-center justify-center gap-4 px-4 py-16 text-center", children: [(0, jsx_runtime_1.jsx)("h1", { className: "text-3xl font-bold text-slate-100", children: "Unable to load product" }), (0, jsx_runtime_1.jsx)("p", { className: "text-sm text-slate-400", children: "Please check your connection and try again." }), (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: result.retry, className: "rounded-xl bg-white px-5 py-2.5 text-sm font-bold text-slate-950", children: "Try again" })] }));
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export interface ThemeToggleProps {
|
|
3
|
+
className?: string;
|
|
4
|
+
showLabel?: boolean;
|
|
5
|
+
}
|
|
6
|
+
/**
|
|
7
|
+
* Built-in ThemeToggle Component for DENEB Storefront Templates.
|
|
8
|
+
* Toggles the `.dark` class on the root <html> element and persists preference to localStorage.
|
|
9
|
+
*/
|
|
10
|
+
export declare function ThemeToggle({ className, showLabel }: ThemeToggleProps): React.JSX.Element;
|
|
11
|
+
export default ThemeToggle;
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
'use client';
|
|
3
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
|
+
exports.ThemeToggle = ThemeToggle;
|
|
5
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
6
|
+
const react_1 = require("react");
|
|
7
|
+
/**
|
|
8
|
+
* Built-in ThemeToggle Component for DENEB Storefront Templates.
|
|
9
|
+
* Toggles the `.dark` class on the root <html> element and persists preference to localStorage.
|
|
10
|
+
*/
|
|
11
|
+
function ThemeToggle({ className = '', showLabel = false }) {
|
|
12
|
+
const [isDark, setIsDark] = (0, react_1.useState)(false);
|
|
13
|
+
const [mounted, setMounted] = (0, react_1.useState)(false);
|
|
14
|
+
(0, react_1.useEffect)(() => {
|
|
15
|
+
setMounted(true);
|
|
16
|
+
const hasDarkClass = typeof document !== 'undefined' && document.documentElement.classList.contains('dark');
|
|
17
|
+
const storedTheme = typeof window !== 'undefined' ? localStorage.getItem('deneb-theme') : null;
|
|
18
|
+
const prefersDark = typeof window !== 'undefined' && typeof window.matchMedia === 'function' ? window.matchMedia('(prefers-color-scheme: dark)').matches : false;
|
|
19
|
+
const activeDark = storedTheme ? storedTheme === 'dark' : hasDarkClass || prefersDark;
|
|
20
|
+
setIsDark(activeDark);
|
|
21
|
+
if (activeDark) {
|
|
22
|
+
if (typeof document !== 'undefined')
|
|
23
|
+
document.documentElement.classList.add('dark');
|
|
24
|
+
}
|
|
25
|
+
else {
|
|
26
|
+
if (typeof document !== 'undefined')
|
|
27
|
+
document.documentElement.classList.remove('dark');
|
|
28
|
+
}
|
|
29
|
+
}, []);
|
|
30
|
+
const toggleTheme = () => {
|
|
31
|
+
const nextDark = !isDark;
|
|
32
|
+
setIsDark(nextDark);
|
|
33
|
+
if (nextDark) {
|
|
34
|
+
if (typeof document !== 'undefined')
|
|
35
|
+
document.documentElement.classList.add('dark');
|
|
36
|
+
if (typeof window !== 'undefined')
|
|
37
|
+
localStorage.setItem('deneb-theme', 'dark');
|
|
38
|
+
}
|
|
39
|
+
else {
|
|
40
|
+
if (typeof document !== 'undefined')
|
|
41
|
+
document.documentElement.classList.remove('dark');
|
|
42
|
+
if (typeof window !== 'undefined')
|
|
43
|
+
localStorage.setItem('deneb-theme', 'light');
|
|
44
|
+
}
|
|
45
|
+
};
|
|
46
|
+
if (!mounted) {
|
|
47
|
+
return ((0, jsx_runtime_1.jsx)("button", { type: "button", "aria-label": "Toggle theme", "data-preview-static": "theme-toggle", className: `w-9 h-9 rounded-lg border border-[var(--border-color,#e2e8f0)] bg-[var(--card-bg,#ffffff)] opacity-0 transition-opacity ${className}` }));
|
|
48
|
+
}
|
|
49
|
+
return ((0, jsx_runtime_1.jsxs)("button", { type: "button", onClick: toggleTheme, "data-preview-static": "theme-toggle", "aria-label": isDark ? 'Switch to light mode' : 'Switch to dark mode', title: isDark ? 'Switch to light mode' : 'Switch to dark mode', className: `inline-flex items-center justify-center gap-2 h-9 px-2.5 rounded-lg border border-[var(--border-color,rgba(0,0,0,0.1))] bg-[var(--card-bg,#ffffff)] text-[var(--text-color,#0f172a)] hover:border-[var(--color-primary,#016a7e)] hover:text-[var(--color-primary,#016a7e)] shadow-sm transition-all duration-200 cursor-pointer ${className}`, children: [isDark ? ((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "w-4 h-4 text-amber-400", children: (0, jsx_runtime_1.jsx)("path", { d: "M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" }) })) : ((0, jsx_runtime_1.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "w-4 h-4 text-amber-500", children: [(0, jsx_runtime_1.jsx)("circle", { cx: "12", cy: "12", r: "4" }), (0, jsx_runtime_1.jsx)("path", { d: "M12 2v2" }), (0, jsx_runtime_1.jsx)("path", { d: "M12 20v2" }), (0, jsx_runtime_1.jsx)("path", { d: "m4.93 4.93 1.41 1.41" }), (0, jsx_runtime_1.jsx)("path", { d: "m17.66 17.66 1.41 1.41" }), (0, jsx_runtime_1.jsx)("path", { d: "M2 12h2" }), (0, jsx_runtime_1.jsx)("path", { d: "M20 12h2" }), (0, jsx_runtime_1.jsx)("path", { d: "m6.34 17.66-1.41 1.41" }), (0, jsx_runtime_1.jsx)("path", { d: "m19.07 4.93-1.41 1.41" })] })), showLabel && ((0, jsx_runtime_1.jsx)("span", { className: "text-xs font-medium", children: isDark ? 'Dark' : 'Light' }))] }));
|
|
50
|
+
}
|
|
51
|
+
exports.default = ThemeToggle;
|
package/dist/index.d.ts
CHANGED
|
@@ -42,6 +42,7 @@ export * from './EditableCartDrawer';
|
|
|
42
42
|
export * from './EditableFilterSidebar';
|
|
43
43
|
export * from './SiteDataProvider';
|
|
44
44
|
export * from './ThemeStyles';
|
|
45
|
+
export * from './ThemeToggle';
|
|
45
46
|
export { ResponsiveBaseStyles } from './ResponsiveBaseStyles';
|
|
46
47
|
export { DenebComponentStyles } from './DenebComponentStyles';
|
|
47
48
|
export { FontLoader, DENEB_FONTS_LINK_ID } from './fonts/FontLoader';
|
package/dist/index.js
CHANGED
|
@@ -60,6 +60,7 @@ __exportStar(require("./EditableCartDrawer"), exports);
|
|
|
60
60
|
__exportStar(require("./EditableFilterSidebar"), exports);
|
|
61
61
|
__exportStar(require("./SiteDataProvider"), exports);
|
|
62
62
|
__exportStar(require("./ThemeStyles"), exports);
|
|
63
|
+
__exportStar(require("./ThemeToggle"), exports);
|
|
63
64
|
var ResponsiveBaseStyles_1 = require("./ResponsiveBaseStyles");
|
|
64
65
|
Object.defineProperty(exports, "ResponsiveBaseStyles", { enumerable: true, get: function () { return ResponsiveBaseStyles_1.ResponsiveBaseStyles; } });
|
|
65
66
|
var DenebComponentStyles_1 = require("./DenebComponentStyles");
|
package/dist/location/MapLink.js
CHANGED
|
@@ -66,5 +66,5 @@ function MapLink({ name, mapUrl, addressUrl, url, address, city, state, country,
|
|
|
66
66
|
...variantStyles[variant],
|
|
67
67
|
};
|
|
68
68
|
const opensNewTab = finalHref !== '#';
|
|
69
|
-
return ((0, jsx_runtime_1.jsxs)("
|
|
69
|
+
return ((0, jsx_runtime_1.jsxs)("a", { href: finalHref, "data-preview-field-path": resolvedUrlFieldPath, target: opensNewTab ? '_blank' : undefined, rel: opensNewTab ? 'noopener noreferrer' : undefined, className: `deneb-map-link ${className}`.trim(), style: mergedStyles, ...rest, children: [icon !== undefined ? icon : defaultIcon, (0, jsx_runtime_1.jsx)("span", { "data-preview-field-path": resolvedLabelFieldPath, children: label })] }));
|
|
70
70
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@deneb-ui/ui",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.73",
|
|
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.73"
|
|
54
54
|
},
|
|
55
55
|
"peerDependencies": {
|
|
56
56
|
"react": "^18.0.0 || ^19.0.0",
|
package/platform-contract.json
CHANGED
|
@@ -26,7 +26,10 @@
|
|
|
26
26
|
"products[*].measurement",
|
|
27
27
|
"products[*].unit",
|
|
28
28
|
"testimonials[*].id",
|
|
29
|
-
"categories[*].slug"
|
|
29
|
+
"categories[*].slug",
|
|
30
|
+
"services[*].id",
|
|
31
|
+
"products[*].currency",
|
|
32
|
+
"about.collageImages[*].id"
|
|
30
33
|
],
|
|
31
34
|
"platformSiteDataKeys": [
|
|
32
35
|
"__fivoraIntake",
|