@deneb-ui/ui 2.0.0

package/dist/EditableDialog.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+export interface DialogProps extends React.HTMLAttributes<HTMLDivElement> {
+    open?: boolean;
+    onClose?: () => void;
+    title?: string;
+    description?: string;
+    titleFieldPath?: string;
+    descriptionFieldPath?: string;
+    size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
+    showCloseButton?: boolean;
+    footerSlot?: React.ReactNode;
+}
+/**
+ * Dialog (Modal) component for DENEB UI.
+ * Features backdrop blur, keyboard Escape to close, smooth scaling animation,
+ * and optional live visual editing for title and description.
+ */
+export declare function EditableDialog({ open, onClose, title, description, titleFieldPath, descriptionFieldPath, size, showCloseButton, footerSlot, children, className, style, ...props }: DialogProps): React.JSX.Element | null;
+export interface DialogContentProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+export declare function DialogHeader({ className, style, children, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+export declare function DialogTitle({ className, style, children, ...props }: React.HTMLAttributes<HTMLHeadingElement>): React.JSX.Element;
+export declare function DialogDescription({ className, style, children, ...props }: React.HTMLAttributes<HTMLParagraphElement>): React.JSX.Element;
+export declare function DialogFooter({ className, style, children, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+export declare const Dialog: typeof EditableDialog;

package/dist/EditableDialog.js

@@ -0,0 +1,145 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Dialog = void 0;
+exports.EditableDialog = EditableDialog;
+exports.DialogHeader = DialogHeader;
+exports.DialogTitle = DialogTitle;
+exports.DialogDescription = DialogDescription;
+exports.DialogFooter = DialogFooter;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const EditableText_1 = require("./EditableText");
+const SIZE_MAP = {
+    sm: '400px',
+    md: '540px',
+    lg: '720px',
+    xl: '900px',
+    full: '96vw',
+};
+/**
+ * Dialog (Modal) component for DENEB UI.
+ * Features backdrop blur, keyboard Escape to close, smooth scaling animation,
+ * and optional live visual editing for title and description.
+ */
+function EditableDialog({ open = false, onClose, title, description, titleFieldPath, descriptionFieldPath, size = 'md', showCloseButton = true, footerSlot, children, className = '', style, ...props }) {
+    // Handle ESC key press to close
+    (0, react_1.useEffect)(() => {
+        if (!open)
+            return;
+        const handleKeyDown = (e) => {
+            if (e.key === 'Escape' && onClose) {
+                onClose();
+            }
+        };
+        window.addEventListener('keydown', handleKeyDown);
+        return () => window.removeEventListener('keydown', handleKeyDown);
+    }, [open, onClose]);
+    // Lock body scroll when open
+    (0, react_1.useEffect)(() => {
+        if (open) {
+            const originalOverflow = document.body.style.overflow;
+            document.body.style.overflow = 'hidden';
+            return () => {
+                document.body.style.overflow = originalOverflow;
+            };
+        }
+    }, [open]);
+    if (!open)
+        return null;
+    const maxWidth = SIZE_MAP[size] || SIZE_MAP.md;
+    return ((0, jsx_runtime_1.jsxs)("div", { role: "dialog", "aria-modal": "true", style: {
+            position: 'fixed',
+            inset: 0,
+            zIndex: 9999,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            padding: '1rem',
+        }, className: `deneb-dialog-portal ${className}`.trim(), ...props, children: [(0, jsx_runtime_1.jsx)("div", { onClick: onClose, style: {
+                    position: 'fixed',
+                    inset: 0,
+                    backgroundColor: 'rgba(15, 23, 42, 0.65)',
+                    backdropFilter: 'blur(8px)',
+                    WebkitBackdropFilter: 'blur(8px)',
+                    animation: 'deneb-fade-in 0.2s cubic-bezier(0.16, 1, 0.3, 1)',
+                }, className: "deneb-dialog-backdrop" }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                    position: 'relative',
+                    width: '100%',
+                    maxWidth,
+                    backgroundColor: '#ffffff',
+                    borderRadius: '20px',
+                    boxShadow: '0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.05)',
+                    padding: '2rem',
+                    zIndex: 10,
+                    overflow: 'hidden',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    maxHeight: '90vh',
+                    animation: 'deneb-zoom-in 0.25s cubic-bezier(0.16, 1, 0.3, 1)',
+                    ...style,
+                }, className: "deneb-dialog-content", children: [(title || titleFieldPath || showCloseButton) && ((0, jsx_runtime_1.jsxs)("div", { style: {
+                            display: 'flex',
+                            alignItems: 'flex-start',
+                            justifyContent: 'space-between',
+                            marginBottom: description || descriptionFieldPath ? '0.5rem' : '1.25rem',
+                        }, children: [titleFieldPath ? ((0, jsx_runtime_1.jsx)(EditableText_1.EditableText, { as: "h2", id: titleFieldPath, defaultValue: title, style: {
+                                    fontSize: '1.35rem',
+                                    fontWeight: 700,
+                                    color: 'var(--heading-color, #0f172a)',
+                                    margin: 0,
+                                } })) : title ? ((0, jsx_runtime_1.jsx)("h2", { "data-preview-static": "dialog-title", style: {
+                                    fontSize: '1.35rem',
+                                    fontWeight: 700,
+                                    color: 'var(--heading-color, #0f172a)',
+                                    margin: 0,
+                                }, children: title })) : ((0, jsx_runtime_1.jsx)("div", {})), showCloseButton && onClose && ((0, jsx_runtime_1.jsx)("button", { type: "button", "data-preview-static": "dialog-close-btn", onClick: onClose, "aria-label": "Close dialog", style: {
+                                    background: 'none',
+                                    border: 'none',
+                                    padding: '0.375rem',
+                                    borderRadius: '9999px',
+                                    cursor: 'pointer',
+                                    color: '#94a3b8',
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    justifyContent: 'center',
+                                    transition: 'background-color 0.15s ease, color 0.15s ease',
+                                }, onMouseEnter: (e) => {
+                                    e.currentTarget.style.backgroundColor = '#f1f5f9';
+                                    e.currentTarget.style.color = '#0f172a';
+                                }, onMouseLeave: (e) => {
+                                    e.currentTarget.style.backgroundColor = 'transparent';
+                                    e.currentTarget.style.color = '#94a3b8';
+                                }, children: (0, jsx_runtime_1.jsx)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" }) }) }))] })), descriptionFieldPath ? ((0, jsx_runtime_1.jsx)(EditableText_1.EditableText, { as: "p", id: descriptionFieldPath, defaultValue: description, style: {
+                            fontSize: '0.925rem',
+                            color: 'var(--muted-text, #64748b)',
+                            marginBottom: '1.5rem',
+                            lineHeight: 1.5,
+                        } })) : description ? ((0, jsx_runtime_1.jsx)("p", { "data-preview-static": "dialog-description", style: {
+                            fontSize: '0.925rem',
+                            color: 'var(--muted-text, #64748b)',
+                            marginBottom: '1.5rem',
+                            lineHeight: 1.5,
+                            margin: '0 0 1.5rem 0',
+                        }, children: description })) : null, (0, jsx_runtime_1.jsx)("div", { style: { flex: 1, overflowY: 'auto' }, children: children }), footerSlot && ((0, jsx_runtime_1.jsx)("div", { style: {
+                            marginTop: '1.75rem',
+                            paddingTop: '1rem',
+                            borderTop: '1px solid #f1f5f9',
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'flex-end',
+                            gap: '0.75rem',
+                        }, children: footerSlot }))] })] }));
+}
+function DialogHeader({ className = '', style, children, ...props }) {
+    return ((0, jsx_runtime_1.jsx)("div", { style: { marginBottom: '1rem', ...style }, className: `deneb-dialog-header ${className}`.trim(), ...props, children: children }));
+}
+function DialogTitle({ className = '', style, children, ...props }) {
+    return ((0, jsx_runtime_1.jsx)("h3", { style: { fontSize: '1.25rem', fontWeight: 700, color: 'var(--heading-color, #0f172a)', margin: 0, ...style }, className: `deneb-dialog-title ${className}`.trim(), ...props, children: children }));
+}
+function DialogDescription({ className = '', style, children, ...props }) {
+    return ((0, jsx_runtime_1.jsx)("p", { style: { fontSize: '0.9rem', color: 'var(--muted-text, #64748b)', marginTop: '0.375rem', ...style }, className: `deneb-dialog-description ${className}`.trim(), ...props, children: children }));
+}
+function DialogFooter({ className = '', style, children, ...props }) {
+    return ((0, jsx_runtime_1.jsx)("div", { style: { marginTop: '1.5rem', display: 'flex', justifyContent: 'flex-end', gap: '0.75rem', ...style }, className: `deneb-dialog-footer ${className}`.trim(), ...props, children: children }));
+}
+exports.Dialog = EditableDialog;

package/dist/EditableFAQAccordion.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+export interface FAQItem {
+    id?: string | number;
+    question?: string;
+    answer?: string;
+    [key: string]: unknown;
+}
+export interface EditableFAQItemProps extends React.HTMLAttributes<HTMLElement> {
+    itemPath: string;
+    item: FAQItem;
+    defaultOpen?: boolean;
+}
+export declare function EditableFAQItem({ itemPath, item, defaultOpen, className, style, ...props }: EditableFAQItemProps): React.JSX.Element;
+export interface EditableFAQAccordionProps extends React.HTMLAttributes<HTMLDivElement> {
+    listPath?: string;
+    items: FAQItem[];
+    defaultOpenIndex?: number;
+}
+export declare function EditableFAQAccordion({ listPath, items, defaultOpenIndex, className, style, ...props }: EditableFAQAccordionProps): React.JSX.Element;

package/dist/EditableFAQAccordion.js

@@ -0,0 +1,62 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EditableFAQItem = EditableFAQItem;
+exports.EditableFAQAccordion = EditableFAQAccordion;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const EditableText_1 = require("./EditableText");
+function EditableFAQItem({ itemPath, item, defaultOpen = true, className = '', style, ...props }) {
+    const [isOpen, setIsOpen] = (0, react_1.useState)(defaultOpen);
+    const question = String(item?.question || 'Frequently Asked Question?');
+    const answer = String(item?.answer || 'Detailed answer explaining the details clearly.');
+    return ((0, jsx_runtime_1.jsxs)("div", { "data-preview-item-path": itemPath, style: {
+            borderBottom: '1px solid #e2e8f0',
+            padding: '1.25rem 0',
+            ...style,
+        }, className: `editable-faq-item ${className}`.trim(), ...props, children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", onClick: () => setIsOpen(!isOpen), "aria-expanded": isOpen, style: {
+                    width: '100%',
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    alignItems: 'center',
+                    textAlign: 'left',
+                    background: 'none',
+                    border: 'none',
+                    padding: 0,
+                    cursor: 'pointer',
+                }, children: [(0, jsx_runtime_1.jsx)(EditableText_1.EditableText, { as: "h4", id: `${itemPath}.question`, defaultValue: question, style: {
+                            fontSize: '1.1rem',
+                            fontWeight: 600,
+                            color: 'var(--heading-color, #0f172a)',
+                            paddingRight: '1rem',
+                        } }), (0, jsx_runtime_1.jsx)("div", { style: {
+                            width: '28px',
+                            height: '28px',
+                            borderRadius: '9999px',
+                            backgroundColor: isOpen ? 'var(--brand-color, #2563eb)' : '#f1f5f9',
+                            color: isOpen ? '#ffffff' : '#64748b',
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            flexShrink: 0,
+                            transition: 'transform 0.25s ease, background-color 0.25s ease',
+                            transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)',
+                        }, children: (0, jsx_runtime_1.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", "data-preview-static": "faq-chevron", children: (0, jsx_runtime_1.jsx)("polyline", { points: "6 9 12 15 18 9" }) }) })] }), (0, jsx_runtime_1.jsx)("div", { style: {
+                    marginTop: '0.875rem',
+                    paddingRight: '2rem',
+                    maxHeight: isOpen ? '1000px' : '0px',
+                    overflow: 'hidden',
+                    opacity: isOpen ? 1 : 0.01,
+                    transition: 'all 0.25s ease',
+                }, children: (0, jsx_runtime_1.jsx)(EditableText_1.EditableText, { as: "p", id: `${itemPath}.answer`, defaultValue: answer, style: {
+                        fontSize: '0.95rem',
+                        color: 'var(--muted-text, #64748b)',
+                        lineHeight: 1.6,
+                    } }) })] }));
+}
+function EditableFAQAccordion({ listPath = 'home.faq', items = [], defaultOpenIndex = 0, className = '', style, ...props }) {
+    return ((0, jsx_runtime_1.jsx)("div", { "data-preview-list-path": listPath, style: {
+            maxWidth: '800px',
+            margin: '0 auto',
+            ...style,
+        }, className: `editable-faq-accordion ${className}`.trim(), ...props, children: items.map((item, idx) => ((0, jsx_runtime_1.jsx)(EditableFAQItem, { itemPath: `${listPath}[${idx}]`, item: item, defaultOpen: idx === defaultOpenIndex }, item.id || idx))) }));
+}

package/dist/EditableFooter.d.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+export interface FooterLink {
+    id: string;
+    label: string;
+    route: string;
+}
+export interface EditableFooterProps extends React.HTMLAttributes<HTMLElement> {
+    defaultLinks?: FooterLink[];
+    links?: FooterLink[];
+    basePath?: string;
+    showNewsletter?: boolean;
+}
+/**
+ * Next-Level DENEB UI Footer
+ *
+ * Features:
+ * - High-end Shadcn-inspired dark aesthetic with subtle borders and ambient highlights
+ * - 100% Real-Time Auto-Synchronization with Header (Logo, Website Title, Nav labels)
+ * - 4-Column Responsive Layout:
+ *    Col 1: Synced Brand (Logo + Site Name + Short Description + Social Icons)
+ *    Col 2: Synced Explore Navigation (Routes dynamically synced with Header nav items)
+ *    Col 3: Contact & Support (Direct contact shortcuts, address, email, phone)
+ *    Col 4: Dynamic Footer Heading & Sleek Interactive Newsletter Card
+ * - Strict Visual Editing Marker Support (`common.shortDescription`, `common.footerHeading`, `common.copyright`)
+ * - Route Filtering Compliance (`data-target-page` wrappers)
+ * - Tailored Tailwind CSS utility classes + resilient inline CSS fallbacks
+ *
+ * Created by Chamika Gayashan (CEE G)
+ */
+export declare function EditableFooter({ defaultLinks, links, basePath, showNewsletter, className, style, ...props }: EditableFooterProps): React.JSX.Element;
+export declare const Footer: typeof EditableFooter;