@deneb-ui/ui 2.0.22 → 2.0.24

package/dist/fonts/useDenebFonts.js

@@ -0,0 +1,29 @@
+"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDenebFonts = useDenebFonts;
+const react_1 = require("react");
+const core_1 = require("@deneb-ui/core");
+const SiteDataProvider_1 = require("../SiteDataProvider");
+function useDenebFonts(extraFontIds = []) {
+    const siteData = (0, SiteDataProvider_1.useSiteData)();
+    const fontIds = (0, react_1.useMemo)(() => {
+        const fromSite = (0, core_1.collectFontIdsFromSiteData)(siteData);
+        const merged = new Set([...fromSite, ...extraFontIds.filter(Boolean)]);
+        return Array.from(merged);
+    }, [siteData, extraFontIds]);
+    const googleStylesheetUrl = (0, react_1.useMemo)(() => (0, core_1.buildGoogleFontsStylesheetUrl)(fontIds), [fontIds]);
+    const cssVariables = (0, react_1.useMemo)(() => {
+        const theme = siteData?.theme ??
+            siteData
+                ?.template?.structure?.theme;
+        const heading = (0, core_1.resolveFontFamily)(typeof theme?.headingFont === 'string' ? theme.headingFont : undefined);
+        const body = (0, core_1.resolveFontFamily)(typeof theme?.bodyFont === 'string' ? theme.bodyFont : undefined);
+        return {
+            ...(heading ? { '--heading-font': heading } : {}),
+            ...(body ? { '--body-font': body } : {}),
+        };
+    }, [siteData]);
+    const catalog = (0, react_1.useMemo)(() => fontIds.map((id) => (0, core_1.lookupFontDefinition)(id)).filter(Boolean), [fontIds]);
+    return { fontIds, googleStylesheetUrl, cssVariables, catalog };
+}

package/dist/hooks/useComponentStyle.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { type StyleKind } from '@deneb-ui/core';
+import { type GenericRecord } from '../SiteDataProvider';
+export declare function resolveComponentStyle(siteData: GenericRecord, stylePath: string, defaults?: GenericRecord): GenericRecord;
+export declare function useComponentStyle<T extends GenericRecord = GenericRecord>(stylePath: string | undefined, styleKind: StyleKind, defaults?: Partial<T>): {
+    style: T;
+    cssVars: React.CSSProperties;
+};

package/dist/hooks/useComponentStyle.js

@@ -0,0 +1,46 @@
+"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resolveComponentStyle = resolveComponentStyle;
+exports.useComponentStyle = useComponentStyle;
+const react_1 = require("react");
+const core_1 = require("@deneb-ui/core");
+const SiteDataProvider_1 = require("../SiteDataProvider");
+function getNestedValue(root, dottedPath) {
+    if (!root || !dottedPath)
+        return undefined;
+    const parts = (0, SiteDataProvider_1.parseFieldPath)(dottedPath);
+    let current = root;
+    for (const part of parts) {
+        if (typeof part === 'number') {
+            if (!Array.isArray(current))
+                return undefined;
+            current = current[part];
+        }
+        else {
+            if (!(0, SiteDataProvider_1.isRecord)(current))
+                return undefined;
+            current = current[part];
+        }
+    }
+    return current;
+}
+function resolveComponentStyle(siteData, stylePath, defaults) {
+    const stylesTree = (0, SiteDataProvider_1.isRecord)(siteData.styles) ? siteData.styles : {};
+    const fromStylesTree = stylesTree[stylePath];
+    const fromContentSuffix = (0, SiteDataProvider_1.getFieldStyle)(siteData.content, stylePath);
+    const raw = (0, SiteDataProvider_1.isRecord)(fromStylesTree)
+        ? fromStylesTree
+        : fromContentSuffix ?? {};
+    return { ...(defaults ?? {}), ...raw };
+}
+function useComponentStyle(stylePath, styleKind, defaults) {
+    const siteData = (0, SiteDataProvider_1.useSiteData)();
+    const merged = (0, react_1.useMemo)(() => {
+        if (!stylePath)
+            return (defaults ?? {});
+        return resolveComponentStyle(siteData, stylePath, defaults);
+    }, [siteData, stylePath, defaults]);
+    const cssVars = (0, react_1.useMemo)(() => (0, core_1.styleToCssVariables)(styleKind, merged), [styleKind, merged]);
+    return { style: merged, cssVars };
+}

package/dist/index.d.ts

@@ -32,6 +32,14 @@ export * from './cart/useCart';
 export * from './EditableCartDrawer';
 export * from './EditableFilterSidebar';
 export * from './SiteDataProvider';
+export * from './ThemeStyles';
+export { ResponsiveBaseStyles } from './ResponsiveBaseStyles';
+export { DenebComponentStyles } from './DenebComponentStyles';
+export { FontLoader, DENEB_FONTS_LINK_ID } from './fonts/FontLoader';
+export { useDenebFonts } from './fonts/useDenebFonts';
+export * from './hooks/useComponentStyle';
+export { DENEB_FONT_REGISTRY, DENEB_GOOGLE_FONT_COUNT, buildGoogleFontsStylesheetUrl, collectFontIdsFromSiteData, listFontsByCategory, lookupFontDefinition, normalizeFontId, resolveInstallableFont, formatResponsiveFontSize, } from '@deneb-ui/core';
+export { STYLE_PATCH_MESSAGE, DENEB_STYLE_PATCH_MESSAGE, STYLE_TARGET_ATTRIBUTE, STYLE_TYPE_ATTRIBUTE, patchElementStyle, patchStyleByPath, styleToCssVariables, validateStyleTree, collectStyleTargetsFromHtml, } from '@deneb-ui/core';
 export * from './utils';
 export * from './core';
 export * from './contact';

package/dist/index.js

@@ -18,7 +18,8 @@ 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.DENEB_AUTHOR = exports.DENEB_FRAMEWORK_VERSION = exports.DENEB_FRAMEWORK_NAME = exports.FilterSidebar = exports.CartDrawer = 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;
+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 = exports.collectStyleTargetsFromHtml = exports.validateStyleTree = exports.styleToCssVariables = exports.patchStyleByPath = exports.patchElementStyle = exports.STYLE_TYPE_ATTRIBUTE = exports.STYLE_TARGET_ATTRIBUTE = exports.DENEB_STYLE_PATCH_MESSAGE = exports.STYLE_PATCH_MESSAGE = exports.formatResponsiveFontSize = exports.resolveInstallableFont = exports.normalizeFontId = exports.lookupFontDefinition = exports.listFontsByCategory = exports.collectFontIdsFromSiteData = exports.buildGoogleFontsStylesheetUrl = exports.DENEB_GOOGLE_FONT_COUNT = exports.DENEB_FONT_REGISTRY = exports.useDenebFonts = exports.DENEB_FONTS_LINK_ID = exports.FontLoader = exports.DenebComponentStyles = exports.ResponsiveBaseStyles = void 0;
+exports.DENEB_AUTHOR = exports.DENEB_FRAMEWORK_VERSION = exports.DENEB_FRAMEWORK_NAME = exports.FilterSidebar = exports.CartDrawer = exports.FloatingContactWidget = exports.CookieConsentBanner = exports.ProductQuickView = exports.TrustBadges = exports.StickyMobileBar = exports.CategoryPills = exports.AnnouncementBar = exports.HeroSplit = void 0;
 __exportStar(require("./EditableText"), exports);
 __exportStar(require("./EditableImage"), exports);
 __exportStar(require("./EditableList"), exports);
@@ -49,6 +50,37 @@ __exportStar(require("./cart/useCart"), exports);
 __exportStar(require("./EditableCartDrawer"), exports);
 __exportStar(require("./EditableFilterSidebar"), exports);
 __exportStar(require("./SiteDataProvider"), exports);
+__exportStar(require("./ThemeStyles"), exports);
+var ResponsiveBaseStyles_1 = require("./ResponsiveBaseStyles");
+Object.defineProperty(exports, "ResponsiveBaseStyles", { enumerable: true, get: function () { return ResponsiveBaseStyles_1.ResponsiveBaseStyles; } });
+var DenebComponentStyles_1 = require("./DenebComponentStyles");
+Object.defineProperty(exports, "DenebComponentStyles", { enumerable: true, get: function () { return DenebComponentStyles_1.DenebComponentStyles; } });
+var FontLoader_1 = require("./fonts/FontLoader");
+Object.defineProperty(exports, "FontLoader", { enumerable: true, get: function () { return FontLoader_1.FontLoader; } });
+Object.defineProperty(exports, "DENEB_FONTS_LINK_ID", { enumerable: true, get: function () { return FontLoader_1.DENEB_FONTS_LINK_ID; } });
+var useDenebFonts_1 = require("./fonts/useDenebFonts");
+Object.defineProperty(exports, "useDenebFonts", { enumerable: true, get: function () { return useDenebFonts_1.useDenebFonts; } });
+__exportStar(require("./hooks/useComponentStyle"), exports);
+var core_1 = require("@deneb-ui/core");
+Object.defineProperty(exports, "DENEB_FONT_REGISTRY", { enumerable: true, get: function () { return core_1.DENEB_FONT_REGISTRY; } });
+Object.defineProperty(exports, "DENEB_GOOGLE_FONT_COUNT", { enumerable: true, get: function () { return core_1.DENEB_GOOGLE_FONT_COUNT; } });
+Object.defineProperty(exports, "buildGoogleFontsStylesheetUrl", { enumerable: true, get: function () { return core_1.buildGoogleFontsStylesheetUrl; } });
+Object.defineProperty(exports, "collectFontIdsFromSiteData", { enumerable: true, get: function () { return core_1.collectFontIdsFromSiteData; } });
+Object.defineProperty(exports, "listFontsByCategory", { enumerable: true, get: function () { return core_1.listFontsByCategory; } });
+Object.defineProperty(exports, "lookupFontDefinition", { enumerable: true, get: function () { return core_1.lookupFontDefinition; } });
+Object.defineProperty(exports, "normalizeFontId", { enumerable: true, get: function () { return core_1.normalizeFontId; } });
+Object.defineProperty(exports, "resolveInstallableFont", { enumerable: true, get: function () { return core_1.resolveInstallableFont; } });
+Object.defineProperty(exports, "formatResponsiveFontSize", { enumerable: true, get: function () { return core_1.formatResponsiveFontSize; } });
+var core_2 = require("@deneb-ui/core");
+Object.defineProperty(exports, "STYLE_PATCH_MESSAGE", { enumerable: true, get: function () { return core_2.STYLE_PATCH_MESSAGE; } });
+Object.defineProperty(exports, "DENEB_STYLE_PATCH_MESSAGE", { enumerable: true, get: function () { return core_2.DENEB_STYLE_PATCH_MESSAGE; } });
+Object.defineProperty(exports, "STYLE_TARGET_ATTRIBUTE", { enumerable: true, get: function () { return core_2.STYLE_TARGET_ATTRIBUTE; } });
+Object.defineProperty(exports, "STYLE_TYPE_ATTRIBUTE", { enumerable: true, get: function () { return core_2.STYLE_TYPE_ATTRIBUTE; } });
+Object.defineProperty(exports, "patchElementStyle", { enumerable: true, get: function () { return core_2.patchElementStyle; } });
+Object.defineProperty(exports, "patchStyleByPath", { enumerable: true, get: function () { return core_2.patchStyleByPath; } });
+Object.defineProperty(exports, "styleToCssVariables", { enumerable: true, get: function () { return core_2.styleToCssVariables; } });
+Object.defineProperty(exports, "validateStyleTree", { enumerable: true, get: function () { return core_2.validateStyleTree; } });
+Object.defineProperty(exports, "collectStyleTargetsFromHtml", { enumerable: true, get: function () { return core_2.collectStyleTargetsFromHtml; } });
 // Smart template components & actions
 __exportStar(require("./utils"), exports);
 __exportStar(require("./core"), exports);

package/dist/utils/index.d.ts

@@ -1 +1,2 @@
 export * from './urls';
+export * from './responsive';

package/dist/utils/index.js

@@ -15,3 +15,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./urls"), exports);
+__exportStar(require("./responsive"), exports);

package/dist/utils/responsive.d.ts

@@ -0,0 +1,33 @@
+/** Standard DENEB UI breakpoints (mobile-first). */
+export declare const BREAKPOINTS: {
+    readonly xs: 480;
+    readonly sm: 640;
+    readonly md: 768;
+    readonly lg: 1024;
+    readonly xl: 1280;
+};
+export type BreakpointKey = keyof typeof BREAKPOINTS;
+export type DeviceTier = 'mobile' | 'tablet' | 'desktop';
+export declare function getDeviceTier(width: number): DeviceTier;
+export declare function mediaQueryUp(breakpoint: BreakpointKey): string;
+export declare function mediaQueryDown(breakpoint: BreakpointKey): string;
+/**
+ * Subscribe to a min-width media query. SSR-safe (defaults to false until mounted).
+ */
+export declare function useMediaQuery(query: string, defaultValue?: boolean): boolean;
+/** Current viewport tier: mobile (<768), tablet (768–1023), desktop (≥1024). */
+export declare function useDeviceTier(): DeviceTier;
+export declare function useIsMobile(): boolean;
+export declare function useIsTablet(): boolean;
+export declare function useIsDesktop(): boolean;
+/** Map section padding tokens to fluid clamp values that scale across devices. */
+export declare const RESPONSIVE_SECTION_PADDING: Record<string, string>;
+export interface ResponsiveColumnsConfig {
+    mobile?: number;
+    tablet?: number;
+    desktop?: number;
+}
+export declare function resolveResponsiveColumns(columns: number | ResponsiveColumnsConfig | undefined, minCardWidth?: string): {
+    template: string;
+    dataAttrs?: Record<string, string>;
+};

package/dist/utils/responsive.js

@@ -0,0 +1,100 @@
+"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RESPONSIVE_SECTION_PADDING = exports.BREAKPOINTS = void 0;
+exports.getDeviceTier = getDeviceTier;
+exports.mediaQueryUp = mediaQueryUp;
+exports.mediaQueryDown = mediaQueryDown;
+exports.useMediaQuery = useMediaQuery;
+exports.useDeviceTier = useDeviceTier;
+exports.useIsMobile = useIsMobile;
+exports.useIsTablet = useIsTablet;
+exports.useIsDesktop = useIsDesktop;
+exports.resolveResponsiveColumns = resolveResponsiveColumns;
+const react_1 = require("react");
+/** Standard DENEB UI breakpoints (mobile-first). */
+exports.BREAKPOINTS = {
+    xs: 480,
+    sm: 640,
+    md: 768,
+    lg: 1024,
+    xl: 1280,
+};
+function getDeviceTier(width) {
+    if (width < exports.BREAKPOINTS.md)
+        return 'mobile';
+    if (width < exports.BREAKPOINTS.lg)
+        return 'tablet';
+    return 'desktop';
+}
+function mediaQueryUp(breakpoint) {
+    return `(min-width: ${exports.BREAKPOINTS[breakpoint]}px)`;
+}
+function mediaQueryDown(breakpoint) {
+    return `(max-width: ${exports.BREAKPOINTS[breakpoint] - 0.02}px)`;
+}
+/**
+ * Subscribe to a min-width media query. SSR-safe (defaults to false until mounted).
+ */
+function useMediaQuery(query, defaultValue = false) {
+    const [matches, setMatches] = (0, react_1.useState)(defaultValue);
+    (0, react_1.useEffect)(() => {
+        if (typeof window === 'undefined' || typeof window.matchMedia !== 'function')
+            return;
+        const mql = window.matchMedia(query);
+        const onChange = () => setMatches(mql.matches);
+        onChange();
+        mql.addEventListener('change', onChange);
+        return () => mql.removeEventListener('change', onChange);
+    }, [query]);
+    return matches;
+}
+/** Current viewport tier: mobile (<768), tablet (768–1023), desktop (≥1024). */
+function useDeviceTier() {
+    const isDesktop = useMediaQuery(mediaQueryUp('lg'));
+    const isTablet = useMediaQuery(mediaQueryUp('md'));
+    if (isDesktop)
+        return 'desktop';
+    if (isTablet)
+        return 'tablet';
+    return 'mobile';
+}
+function useIsMobile() {
+    return useDeviceTier() === 'mobile';
+}
+function useIsTablet() {
+    return useDeviceTier() === 'tablet';
+}
+function useIsDesktop() {
+    return useDeviceTier() === 'desktop';
+}
+/** Map section padding tokens to fluid clamp values that scale across devices. */
+exports.RESPONSIVE_SECTION_PADDING = {
+    none: '0',
+    xs: 'clamp(1rem, 3vw, 1.5rem) 0',
+    sm: 'clamp(1.5rem, 4vw, 2.5rem) 0',
+    md: 'clamp(2rem, 5vw, 4rem) 0',
+    lg: 'clamp(2.5rem, 6vw, 6rem) 0',
+    xl: 'clamp(3rem, 7vw, 8rem) 0',
+    '2xl': 'clamp(3.5rem, 8vw, 10rem) 0',
+};
+function resolveResponsiveColumns(columns, minCardWidth = '280px') {
+    if (typeof columns === 'number') {
+        return { template: `repeat(${columns}, minmax(0, 1fr))` };
+    }
+    if (columns && typeof columns === 'object') {
+        const mobile = columns.mobile ?? 1;
+        const tablet = columns.tablet ?? columns.mobile ?? 2;
+        const desktop = columns.desktop ?? columns.tablet ?? 3;
+        return {
+            template: `repeat(${mobile}, minmax(0, 1fr))`,
+            dataAttrs: {
+                'data-deneb-responsive-cols': 'true',
+                'data-cols-mobile': String(mobile),
+                'data-cols-tablet': String(tablet),
+                'data-cols-desktop': String(desktop),
+            },
+        };
+    }
+    return { template: `repeat(auto-fit, minmax(${minCardWidth}, 1fr))` };
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@deneb-ui/ui",
-  "version": "2.0.22",
-  "description": "DENEB UI - The premier visual-first React component framework for the modern web. Created by Chamika Gayashan & Induranga Kawishwara.",
+  "version": "2.0.24",
+  "description": "Visual-first React component library for editable commerce storefronts. Built for Next.js and Fivora.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "publishConfig": {
@@ -12,32 +12,45 @@
     "url": "git+https://github.com/deneb-ui/core.git",
     "directory": "packages/deneb-ui"
   },
-  "homepage": "https://github.com/deneb-ui/core#readme",
+  "homepage": "https://deneb.fivora.site",
   "bugs": {
     "url": "https://github.com/deneb-ui/core/issues"
   },
   "files": [
     "dist",
+    "scripts",
     "README.md"
   ],
   "scripts": {
     "build": "tsc",
+    "postinstall": "node ./scripts/setup-fonts.cjs",
     "prepublishOnly": "npm run build"
   },
   "keywords": [
     "deneb",
     "deneb-ui",
     "fivora",
+    "react",
+    "nextjs",
+    "components",
+    "ui",
     "ecommerce",
-    "shadcn",
-    "heroui",
+    "storefront",
     "visual-editing",
-    "nextjs",
-    "react"
+    "responsive",
+    "typescript",
+    "shadcn",
+    "tailwind"
   ],
   "author": "Chamika Gayashan & Induranga Kawishwara",
+  "contributors": [
+    "Chamika Gayashan <https://github.com/chamikathereal>",
+    "Induranga Kawishwara <https://github.com/Induranga-kawishwara>"
+  ],
   "license": "MIT",
-  "dependencies": {},
+  "dependencies": {
+    "@deneb-ui/core": "^2.0.24"
+  },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"

package/scripts/setup-fonts.cjs

@@ -0,0 +1,26 @@
+'use strict';
+
+/**
+ * Runs after `npm install @deneb-ui/ui`.
+ * Walks up to the host Next/React app and self-hosts project fonts.
+ * Skip with DENEB_SKIP_FONTS=1.
+ */
+if (process.env.DENEB_SKIP_FONTS === '1') {
+  process.exit(0);
+}
+
+try {
+  const { installFontsForHostOf } = require('@deneb-ui/core/install-fonts');
+  const result = installFontsForHostOf(__dirname);
+  if (result.skipped) {
+    process.exit(0);
+  }
+  if (result.ok && result.installed.length > 0) {
+    console.log(
+      `[@deneb-ui/ui] Configured ${result.installed.length} font(s): ${result.installed.join(', ')}`,
+    );
+  }
+} catch {
+  // Never fail the host npm install because fonts could not be configured.
+  process.exit(0);
+}