@crestbase/web-shared-ui 1.0.2 → 1.0.4

package/dist/components/core/OptionsDropdown.d.ts

@@ -1,17 +1,35 @@
 import React, { ReactNode } from "react";
+export type DropdownRenderHelpers = {
+    /** Close the dropdown programmatically */
+    close: () => void;
+};
 export interface OptionItem {
     id: string;
     label: string;
     onClick: () => void;
     disabled?: boolean;
+    /** Optional icon node shown before the label */
+    icon?: ReactNode;
 }
 export interface OptionsDropdownProps {
-    options: OptionItem[];
+    /**
+     * Array of options to render as the dropdown menu. When `dropdownContent` is provided,
+     * this array is optional and ignored. Kept for backward compatibility.
+     */
+    options?: OptionItem[];
     trigger?: ReactNode;
     listClassName?: string;
     optionClassName?: string;
     containerClassName?: string;
     disabled?: boolean;
+    /**
+     * Custom content to render inside the dropdown. Accepts either a React node
+     * or a render function. When a function is provided, it will receive a
+     * helpers object with a `close()` method that can be used to close the
+     * dropdown programmatically (e.g., from an internal button).
+     * Backward compatible with previous ReactNode usage.
+     */
+    dropdownContent?: ReactNode | ((helpers: DropdownRenderHelpers) => ReactNode);
 }
 declare const _default: (props: OptionsDropdownProps) => React.JSX.Element;
 export default _default;

package/dist/components/core/OptionsDropdown.js

@@ -2,13 +2,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { MoreVertical } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
-const OptionsDropdown = ({ options, trigger, listClassName = "", optionClassName = "", containerClassName = "", disabled = false, }) => {
+const OptionsDropdown = ({ options = [], trigger, listClassName = "", optionClassName = "", containerClassName = "", disabled = false, dropdownContent, }) => {
     const [isOpen, setIsOpen] = useState(false);
     const dropdownRef = useRef(null);
     // Close dropdown when clicking outside
     useEffect(() => {
         const handleClickOutside = (event) => {
-            if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+            if (dropdownRef.current &&
+                !dropdownRef.current.contains(event.target)) {
                 setIsOpen(false);
             }
         };
@@ -35,10 +36,15 @@ const OptionsDropdown = ({ options, trigger, listClassName = "", optionClassName
                     e.preventDefault();
                     e.stopPropagation();
                     handleToggle();
-                }, className: "cursor-pointer", children: trigger || defaultTrigger }), isOpen && (_jsx("div", { className: `${listClassName} absolute right-0 top-full mt-2 bg-white border border-gray-100 rounded-xl divide-y divide-gray-100 shadow-lg z-50 min-w-48 overflow-hidden`, children: options.map((option) => (_jsx("button", { onClick: (e) => {
+                }, className: "cursor-pointer", children: trigger || defaultTrigger }), isOpen && (_jsx("div", { className: `${listClassName} absolute right-0 top-full mt-2 bg-white border border-gray-100 rounded-xl divide-y divide-gray-100 shadow-lg z-50 min-w-48 overflow-hidden flex flex-col`, children: dropdownContent ? (_jsx("div", { onClick: (e) => {
+                        // allow interactive content without closing automatically
+                        e.stopPropagation();
+                    }, children: typeof dropdownContent === "function"
+                        ? dropdownContent({ close: () => setIsOpen(false) })
+                        : dropdownContent })) : (options.map((option) => (_jsxs("button", { onClick: (e) => {
                         e.preventDefault();
                         e.stopPropagation();
                         handleOptionClick(option);
-                    }, disabled: option.disabled, className: `w-full text-left px-3 py-2.5 cursor-pointer text-xs text-gray-500 hover:text-black hover:bg-gray-100 transition-colors duration-200 ${optionClassName}`, children: option.label }, option.id))) }))] }));
+                    }, disabled: option.disabled, className: `w-full text-left px-3 py-2.5 cursor-pointer text-xs text-gray-500 hover:text-black hover:bg-gray-100 transition-colors duration-200 flex items-center gap-3 ${optionClassName}`, children: [option.icon ? (_jsx("span", { className: "inline-flex items-center", children: option.icon })) : null, _jsx("span", { children: option.label })] }, option.id)))) }))] }));
 };
 export default OptionsDropdown;

package/dist/components/core/PromptModal.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+export interface PromptModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    bgClass?: string;
+    onSubmit: () => Promise<void>;
+    submitText?: string;
+    cancelText?: string;
+    children?: React.ReactNode;
+    isLoading?: boolean;
+}
+declare const PromptModal: React.FC<PromptModalProps>;
+export default PromptModal;

package/dist/components/core/PromptModal.js

@@ -0,0 +1,20 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Modal from "../core/Modal";
+const PromptModal = ({ isOpen, onClose, bgClass = "bg-secondaryblue", onSubmit, submitText = "Submit", cancelText = "Cancel", children, isLoading = false, }) => {
+    const handleSubmit = async () => {
+        if (isLoading)
+            return;
+        await onSubmit();
+        if (!isLoading) {
+            onClose();
+        }
+    };
+    const handleClose = () => {
+        if (isLoading)
+            return;
+        onClose();
+    };
+    return (_jsx(Modal, { isOpen: isOpen, onClose: handleClose, children: _jsxs("div", { className: "w-full max-w-[400px] bg-white rounded-lg shadow-xl overflow-hidden", children: [_jsx("div", { className: "flex items-center justify-end border-b border-gray-200 p-4", children: _jsx("button", { onClick: handleClose, disabled: isLoading, className: `p-2 rounded-full bg-gray-200 hover:bg-gray-100 transition-colors ${isLoading ? "cursor-not-allowed opacity-50" : "cursor-pointer"}`, children: _jsxs("svg", { viewBox: "0 0 10 10", className: "text-gray-500 w-3 h-3", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M1.23438 1.23633L9.38847 9.39042", stroke: "currentColor", strokeWidth: "1.2" }), _jsx("path", { d: "M9.39062 1.23633L1.23653 9.39042", stroke: "currentColor", strokeWidth: "1.2" })] }) }) }), _jsx("div", { className: `text-center text-black flex flex-col items-center p-8 pb-4 px-20`, children: children }), _jsxs("div", { className: "flex justify-center text-xs gap-3 p-5 px-8 border-t border-gray-200 bg-gray-50", children: [_jsx("button", { onClick: handleClose, disabled: isLoading, className: `px-8 py-3 text-gray-500 border-gray-500 bg-transparent border hover:text-black rounded-md transition-colors ${isLoading ? "cursor-not-allowed opacity-50" : "cursor-pointer"}`, children: cancelText }), _jsx("button", { onClick: handleSubmit, disabled: isLoading, className: `px-8 py-3 ${bgClass} text-white rounded-md hover:opacity-80 disabled:bg-gray-300 disabled:cursor-not-allowed transition-colors ${isLoading ? "cursor-not-allowed" : "cursor-pointer"}`, children: isLoading ? "Loading..." : submitText })] })] }) }));
+};
+export default PromptModal;

package/dist/components/core/ShareModal.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+export interface ShareModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    shareUrl: string;
+}
+declare const ShareModal: React.FC<ShareModalProps>;
+export default ShareModal;

package/dist/components/core/ShareModal.js

@@ -0,0 +1,22 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from "react";
+import Modal from "../core/Modal";
+import Button from "../button";
+const ShareModal = ({ isOpen, onClose, shareUrl, }) => {
+    const [copied, setCopied] = useState(false);
+    if (!isOpen)
+        return null;
+    const handleCopyLink = async () => {
+        try {
+            await navigator.clipboard.writeText(shareUrl);
+            setCopied(true);
+            setTimeout(() => setCopied(false), 2000);
+        }
+        catch (err) {
+            console.error("Failed to copy link:", err);
+        }
+    };
+    return (_jsx(Modal, { isOpen: isOpen, onClose: onClose, children: _jsxs("div", { className: "relative bg-white rounded-4xl shadow-xl max-w-md w-full mx-4 max-h-[90vh] overflow-y-auto", children: [_jsxs("div", { className: "flex items-center p-8 pb-0 gap-4", children: [_jsx("button", { onClick: onClose, className: "p-2 rounded-full bg-gray-200 hover:bg-gray-100 transition-colors cursor-pointer", children: _jsxs("svg", { width: "9", height: "9", viewBox: "0 0 9 9", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M0.425781 0.423828L8.57987 8.57792", stroke: "#262C55", strokeWidth: "1.2" }), _jsx("path", { d: "M8.58203 0.423828L0.427939 8.57792", stroke: "#262C55", strokeWidth: "1.2" })] }) }), _jsx("h2", { className: "text-sm font-semibold text-secondaryblue", children: "Share" })] }), _jsxs("div", { className: "p-8 pt-6", children: [_jsx("div", { className: "mb-6 w-full text-sm py-3 border-b border-gray-300 text-gray-700 overflow-x-auto whitespace-nowrap", children: shareUrl }), _jsx(Button, { onClick: handleCopyLink, className: "w-full", children: _jsx("div", { className: "flex items-center justify-center gap-2", children: copied ? (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": true, children: "\u2714" }), "Link copied!"] })) : (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": true, children: "\uD83D\uDCCB" }), "Copy link"] })) }) })] })] }) }));
+};
+export default ShareModal;

package/dist/components/index.d.ts

@@ -21,10 +21,17 @@ export { default as CustomDropdown } from "./core/CustomDropdown";
 export { default as Logo } from "./navigation/Logo";
 export { default as Crestbase } from "./svg/Crestbase";
 export { default as CrestbaseColored } from "./svg/CrestbaseColored";
+export { default as ChevronIcon } from "./svg/ChevronIcon";
 export { default as GlobalNotificationProvider } from "./notification/GlobalNotificationProvider";
 export { useNotificationStore } from "./notification/notificationStore";
 export { default as Upload } from "./core/Upload";
 export type { UploadProps, UploadRef } from "./core/Upload";
+export { default as PropertyImageGallery } from "./property-details/PropertyImageGallery";
+export { default as MediaPreviewModal } from "./property-details/MediaPreviewModal";
+export { default as MediaItem } from "./property-details/MediaItem";
+export { default as ShareModal } from "./core/ShareModal";
+export { default as PromptModal } from "./core/PromptModal";
+export { isVideo, organizeViews, getDisplayViews, getLayoutConfig, fallbackImage, } from "./property-details/mediaUtils";
 export type { AccordionProps } from "./core/Accordion";
 export type { ToggleProps } from "./core/Toggle";
 export type { CheckboxProps } from "./core/Checkbox";

package/dist/components/index.js

@@ -22,6 +22,14 @@ export { default as CustomDropdown } from "./core/CustomDropdown";
 export { default as Logo } from "./navigation/Logo";
 export { default as Crestbase } from "./svg/Crestbase";
 export { default as CrestbaseColored } from "./svg/CrestbaseColored";
+export { default as ChevronIcon } from "./svg/ChevronIcon";
 export { default as GlobalNotificationProvider } from "./notification/GlobalNotificationProvider";
 export { useNotificationStore } from "./notification/notificationStore";
 export { default as Upload } from "./core/Upload";
+// Property details
+export { default as PropertyImageGallery } from "./property-details/PropertyImageGallery";
+export { default as MediaPreviewModal } from "./property-details/MediaPreviewModal";
+export { default as MediaItem } from "./property-details/MediaItem";
+export { default as ShareModal } from "./core/ShareModal";
+export { default as PromptModal } from "./core/PromptModal";
+export { isVideo, organizeViews, getDisplayViews, getLayoutConfig, fallbackImage, } from "./property-details/mediaUtils";

package/dist/components/property-details/MediaItem.d.ts

@@ -0,0 +1,13 @@
+import { View } from "../../types/assets";
+interface MediaItemProps {
+    view: View;
+    alt: string;
+    className: string;
+    width: number;
+    height: number;
+    priority?: boolean;
+    onClick: () => void;
+    showVideoLabel?: boolean;
+}
+declare const MediaItem: ({ view, alt, className, width, height, priority, onClick, showVideoLabel, }: MediaItemProps) => import("react/jsx-runtime").JSX.Element;
+export default MediaItem;

package/dist/components/property-details/MediaItem.js

@@ -0,0 +1,12 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Image from "next/image";
+import { fallbackImage, isVideo } from "./mediaUtils";
+const MediaItem = ({ view, alt, className, width, height, priority = false, onClick, showVideoLabel = true, }) => {
+    const isVideoFile = isVideo(view);
+    if (isVideoFile) {
+        return (_jsxs("div", { className: `relative ${className} cursor-pointer group`, onClick: onClick, children: [_jsx("video", { src: view.url, className: "w-full h-full object-cover", muted: true, preload: "metadata", poster: view.url + "#t=0.1" }), _jsx("div", { className: "absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center group-hover:bg-opacity-40 transition-all", children: _jsx("div", { className: "w-12 h-12 bg-white bg-opacity-95 rounded-full flex items-center justify-center shadow-lg group-hover:bg-opacity-100 group-hover:scale-105 transition-all duration-200", children: _jsx("svg", { className: "w-6 h-6 text-gray-800 ml-0.5", fill: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { d: "M8 5v14l11-7z" }) }) }) }), showVideoLabel && (_jsx("div", { className: "absolute top-2 left-2 bg-black bg-opacity-80 text-white text-xs px-2 py-1 rounded font-medium", children: "Video" }))] }));
+    }
+    return (_jsx("div", { className: `${className} cursor-pointer`, onClick: onClick, children: _jsx(Image, { src: view.url || fallbackImage, alt: alt, priority: priority, width: width, height: height, className: "w-full h-full object-cover hover:opacity-95 transition-opacity" }) }));
+};
+export default MediaItem;

package/dist/components/property-details/MediaPreviewModal.d.ts

@@ -0,0 +1,13 @@
+import { View } from "../../types/assets";
+interface MediaPreviewModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    views: View[];
+    selectedIndex: number;
+    propertyName: string;
+    isVideoPlaying: boolean;
+    onVideoPlayingChange: (playing: boolean) => void;
+    onNavigate: (direction: "prev" | "next") => void;
+}
+declare const MediaPreviewModal: ({ isOpen, onClose, views, selectedIndex, propertyName, isVideoPlaying, onVideoPlayingChange, onNavigate, }: MediaPreviewModalProps) => import("react/jsx-runtime").JSX.Element | null;
+export default MediaPreviewModal;

package/dist/components/property-details/MediaPreviewModal.js

@@ -0,0 +1,24 @@
+"use client";
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import Image from "next/image";
+import Modal from "../core/Modal";
+import { XIcon } from "lucide-react";
+import ChevronIcon from "../svg/ChevronIcon";
+const MediaPreviewModal = ({ isOpen, onClose, views, selectedIndex, propertyName, isVideoPlaying, onVideoPlayingChange, onNavigate, }) => {
+    const fallbackImage = "https://images.unsplash.com/photo-1560448204-e02f11c3d0e2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80";
+    const isVideo = (view) => {
+        return (view.name === "video" ||
+            view.url.toLowerCase().includes(".mp4") ||
+            view.url.toLowerCase().includes(".mov") ||
+            view.url.toLowerCase().includes(".avi") ||
+            view.url.toLowerCase().includes(".webm"));
+    };
+    if (!isOpen || selectedIndex < 0 || selectedIndex >= views.length) {
+        return null;
+    }
+    const currentView = views[selectedIndex];
+    const isCurrentVideo = isVideo(currentView);
+    const totalCount = views.length;
+    return (_jsx(Modal, { isOpen: isOpen, onClose: onClose, allowBackdropClose: true, containerClassName: "z-50 mx-auto w-full max-w-6xl flex justify-center items-center text-white px-4", className: "py-8", children: _jsxs("div", { className: "relative w-full bg-black rounded-4xl overflow-hidden", children: [_jsxs("div", { className: "absolute top-4 left-0 right-0 z-10 flex justify-between items-center px-6", children: [_jsxs("div", { className: "text-white text-sm font-medium", children: [selectedIndex + 1, " / ", totalCount] }), _jsx("button", { onClick: onClose, className: "p-2 rounded-full bg-gray-200 hover:bg-gray-100 transition-colors cursor-pointer", children: _jsx(XIcon, { className: "w-4 h-4 text-gray-500" }) })] }), totalCount > 1 && (_jsxs(_Fragment, { children: [_jsx("button", { onClick: () => onNavigate("prev"), className: "absolute left-4 top-1/2 transform -translate-y-1/2 bg-white/50 size-12 rounded-full flex items-center justify-center z-10 transition-colors p-3.5 cursor-pointer hover:bg-white", children: _jsx(ChevronIcon, { className: "size-full rotate-180" }) }), _jsx("button", { onClick: () => onNavigate("next"), className: "absolute right-4 top-1/2 transform -translate-y-1/2 bg-white/50  size-12 rounded-full flex items-center justify-center z-10 transition-colors p-3.5 cursor-pointer hover:bg-white", children: _jsx(ChevronIcon, { className: "size-full" }) })] })), _jsx("div", { className: "flex items-center justify-center pt-16 min-h-[60vh] max-h-[80vh]", children: isCurrentVideo ? (_jsx("div", { className: "relative w-full h-full flex items-center justify-center", children: isVideoPlaying ? (_jsx("video", { src: currentView.url, width: 1200, height: 800, className: "max-w-full max-h-full object-contain", controls: true, autoPlay: true, onEnded: () => onVideoPlayingChange(false), children: _jsx("track", { kind: "captions", srcLang: "en", label: "English" }) })) : (_jsxs("div", { className: "relative cursor-pointer", onClick: () => onVideoPlayingChange(true), children: [_jsx("video", { src: currentView.url, width: 1200, height: 800, className: "max-w-full max-h-full object-contain", muted: true, preload: "metadata", poster: currentView.url + "#t=0.1", children: _jsx("track", { kind: "captions", srcLang: "en", label: "English" }) }), _jsx("div", { className: "absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center hover:bg-opacity-50 transition-all", children: _jsx("div", { className: "w-20 h-20 bg-white bg-opacity-95 rounded-full flex items-center justify-center shadow-xl hover:bg-opacity-100 hover:scale-105 transition-all duration-200", children: _jsx("svg", { className: "w-10 h-10 text-gray-800 ml-1", fill: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { d: "M8 5v14l11-7z" }) }) }) })] })) })) : (_jsx(Image, { src: currentView.url || fallbackImage, alt: `${propertyName} - View ${selectedIndex + 1}`, width: 1200, height: 800, className: "max-w-full max-h-full object-contain" })) })] }) }));
+};
+export default MediaPreviewModal;

package/dist/components/property-details/PropertyImageGallery.d.ts

@@ -0,0 +1,7 @@
+import { View } from "../../types/assets";
+interface PropertyImageGalleryProps {
+    views: View[];
+    propertyName: string;
+}
+declare const PropertyImageGallery: ({ views, propertyName }: PropertyImageGalleryProps) => import("react/jsx-runtime").JSX.Element;
+export default PropertyImageGallery;

package/dist/components/property-details/PropertyImageGallery.js

@@ -0,0 +1,77 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import MediaPreviewModal from "./MediaPreviewModal";
+import MediaItem from "./MediaItem";
+import { getLayoutConfig, organizeViews } from "./mediaUtils";
+import ChevronIcon from "../svg/ChevronIcon";
+const PropertyImageGallery = ({ views, propertyName }) => {
+    const [selectedIndex, setSelectedIndex] = useState(null);
+    const [isVideoPlaying, setIsVideoPlaying] = useState(false);
+    const [mainViewIndex, setMainViewIndex] = useState(0);
+    const allViews = organizeViews(views);
+    const getDisplayViewsFromIndex = (startIndex) => {
+        const maxDisplay = 5;
+        const result = [];
+        for (let i = 0; i < Math.min(maxDisplay, allViews.length); i++) {
+            const index = (startIndex + i) % allViews.length;
+            result.push(allViews[index]);
+        }
+        return result;
+    };
+    const displayViews = getDisplayViewsFromIndex(mainViewIndex);
+    const displayCount = displayViews.length;
+    const totalCount = allViews.length;
+    const layoutConfig = getLayoutConfig(displayCount);
+    const handleViewClick = (displayIndex) => {
+        const actualIndex = (mainViewIndex + displayIndex) % totalCount;
+        setSelectedIndex(actualIndex);
+        setIsVideoPlaying(false);
+    };
+    const handleNavigate = (direction) => {
+        if (selectedIndex !== null) {
+            let newIndex;
+            if (direction === "prev") {
+                newIndex = selectedIndex > 0 ? selectedIndex - 1 : totalCount - 1;
+            }
+            else {
+                newIndex = selectedIndex < totalCount - 1 ? selectedIndex + 1 : 0;
+            }
+            setSelectedIndex(newIndex);
+            setIsVideoPlaying(false);
+        }
+    };
+    const closePreview = () => {
+        setSelectedIndex(null);
+        setIsVideoPlaying(false);
+    };
+    const renderSideItems = () => {
+        const sideViews = displayViews.slice(1);
+        if (displayCount === 2) {
+            return (_jsx(MediaItem, { view: sideViews[0], alt: `${propertyName} - View 2`, className: "w-full h-full", width: 320, height: 350, onClick: () => handleViewClick(1) }));
+        }
+        if (displayCount === 3) {
+            return (_jsxs(_Fragment, { children: [_jsx("div", { className: "h-1/2", children: _jsx(MediaItem, { view: sideViews[0], alt: `${propertyName} - View 2`, className: "w-full h-full", width: 320, height: 225, onClick: () => handleViewClick(1) }) }), _jsx("div", { className: "h-1/2", children: _jsx(MediaItem, { view: sideViews[1], alt: `${propertyName} - View 3`, className: "w-full h-full", width: 320, height: 225, onClick: () => handleViewClick(2) }) })] }));
+        }
+        if (displayCount === 4) {
+            return sideViews.map((view, index) => (_jsx("div", { className: "row-span-1", children: _jsx(MediaItem, { view: view, alt: `${propertyName} - View ${index + 2}`, className: "w-full h-full", width: 320, height: 150, onClick: () => handleViewClick(index + 1) }) }, view.id)));
+        }
+        return sideViews.slice(0, 4).map((view, index) => (_jsxs("div", { className: "w-full h-full relative", children: [_jsx(MediaItem, { view: view, alt: `${propertyName} - View ${index + 2}`, className: "w-full h-full", width: 160, height: 150, onClick: () => handleViewClick(index + 1) }), index === 3 && totalCount > 5 && (_jsxs("button", { className: "absolute inset-0 bg-black bg-opacity-60 flex items-center justify-center text-white text-xl font-semibold cursor-pointer border-none", onClick: () => handleViewClick(index + 1), "aria-label": `View ${totalCount - 5} more images`, children: ["+", totalCount - 5] }))] }, view.id)));
+    };
+    if (displayCount === 0) {
+        return (_jsx("div", { className: "gap-2 m-4 mb-6 mt-0 mx-8 bg-white h-[350px] rounded-3xl overflow-hidden flex items-center justify-center", children: _jsx("div", { className: "text-gray-500", children: "No media available" }) }));
+    }
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex gap-2 m-4 mb-6 mt-0 mx-12 bg-white h-[350px] rounded-3xl overflow-hidden", children: [_jsxs("div", { className: layoutConfig.mainWidth + " h-full relative", children: [_jsx(MediaItem, { view: allViews[mainViewIndex], alt: `${propertyName} - Main view`, className: "w-full h-full", width: displayCount === 1 ? 800 : 480, height: 350, priority: true, onClick: () => {
+                                    setSelectedIndex(mainViewIndex);
+                                    setIsVideoPlaying(false);
+                                } }), totalCount > 1 && (_jsxs(_Fragment, { children: [_jsx("button", { onClick: (e) => {
+                                            e.stopPropagation();
+                                            const prevIndex = mainViewIndex > 0 ? mainViewIndex - 1 : totalCount - 1;
+                                            setMainViewIndex(prevIndex);
+                                        }, className: "absolute left-4 top-1/2 transform -translate-y-1/2 bg-white/70 hover:bg-white size-10 rounded-full flex items-center justify-center z-10 transition-colors p-2.5 cursor-pointer shadow-lg", children: _jsx(ChevronIcon, { className: "size-full rotate-180 text-gray-700" }) }), _jsx("button", { onClick: (e) => {
+                                            e.stopPropagation();
+                                            const nextIndex = mainViewIndex < totalCount - 1 ? mainViewIndex + 1 : 0;
+                                            setMainViewIndex(nextIndex);
+                                        }, className: "absolute right-4 top-1/2 transform -translate-y-1/2 bg-white/70 hover:bg-white size-10 rounded-full flex items-center justify-center z-10 transition-colors p-2.5 cursor-pointer shadow-lg", children: _jsx(ChevronIcon, { className: "size-full text-gray-700" }) })] }))] }), layoutConfig.showSide && (_jsx("div", { className: `${layoutConfig.sideWidth} ${layoutConfig.sideLayout} h-full`, children: renderSideItems() }))] }), _jsx(MediaPreviewModal, { isOpen: selectedIndex !== null, onClose: closePreview, views: allViews, selectedIndex: selectedIndex || 0, propertyName: propertyName, isVideoPlaying: isVideoPlaying, onVideoPlayingChange: setIsVideoPlaying, onNavigate: handleNavigate })] }));
+};
+export default PropertyImageGallery;

package/dist/components/property-details/mediaUtils.d.ts

@@ -0,0 +1,11 @@
+import { View } from "../../types/assets";
+export declare const isVideo: (view: View) => boolean;
+export declare const organizeViews: (views: View[]) => View[];
+export declare const getDisplayViews: (views: View[]) => View[];
+export declare const getLayoutConfig: (count: number) => {
+    mainWidth: string;
+    sideWidth: string;
+    sideLayout: string;
+    showSide: boolean;
+};
+export declare const fallbackImage = "https://images.unsplash.com/photo-1560448204-e02f11c3d0e2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80";

package/dist/components/property-details/mediaUtils.js

@@ -0,0 +1,64 @@
+// Helper function to check if a view is a video
+export const isVideo = (view) => {
+    return (view.name === "video" ||
+        view.url.toLowerCase().includes(".mp4") ||
+        view.url.toLowerCase().includes(".mov") ||
+        view.url.toLowerCase().includes(".avi") ||
+        view.url.toLowerCase().includes(".webm"));
+};
+// Separate and organize views: images first, then videos
+export const organizeViews = (views) => {
+    if (!views || views.length === 0)
+        return [];
+    const images = views.filter((view) => !isVideo(view));
+    const videos = views.filter((view) => isVideo(view));
+    return [...images, ...videos];
+};
+// Get display views (max 5 for gallery display)
+export const getDisplayViews = (views) => {
+    const organized = organizeViews(views);
+    return organized.slice(0, 5);
+};
+// Get layout configuration based on view count
+export const getLayoutConfig = (count) => {
+    if (count === 1) {
+        return {
+            mainWidth: "w-full",
+            sideWidth: "",
+            sideLayout: "",
+            showSide: false,
+        };
+    }
+    if (count === 2) {
+        return {
+            mainWidth: "w-3/5",
+            sideWidth: "w-2/5",
+            sideLayout: "flex flex-col",
+            showSide: true,
+        };
+    }
+    if (count === 3) {
+        return {
+            mainWidth: "w-3/5",
+            sideWidth: "w-2/5",
+            sideLayout: "flex flex-col gap-2",
+            showSide: true,
+        };
+    }
+    if (count === 4) {
+        return {
+            mainWidth: "w-3/5",
+            sideWidth: "w-2/5",
+            sideLayout: "grid grid-cols-1 grid-rows-3 gap-2",
+            showSide: true,
+        };
+    }
+    // 5 or more
+    return {
+        mainWidth: "w-3/5",
+        sideWidth: "w-2/5",
+        sideLayout: "grid grid-cols-2 grid-rows-2 gap-2",
+        showSide: true,
+    };
+};
+export const fallbackImage = "https://images.unsplash.com/photo-1560448204-e02f11c3d0e2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80";

package/dist/components/svg/ChevronIcon.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+interface ChevronIconProps extends React.SVGProps<SVGSVGElement> {
+}
+declare const _default: (props: ChevronIconProps & {
+    ref?: React.Ref<SVGSVGElement>;
+}) => React.JSX.Element;
+export default _default;

package/dist/components/svg/ChevronIcon.js

@@ -0,0 +1,6 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+const ChevronIcon = ({ className = "", ...props }) => {
+    return (_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: className, ...props, children: _jsx("path", { d: "M8 4l8 8-8 8" }) }));
+};
+export default ChevronIcon;

package/dist/index.d.ts

@@ -2,3 +2,5 @@ export * from "./components";
 export * from "./hooks/index";
 export * from "./utils";
 export * from "./types/property";
+export type { View } from "./types/assets";
+export { default as PromptModal } from "./components/core/PromptModal";

package/dist/index.js

@@ -3,3 +3,5 @@ export * from "./components";
 export * from "./hooks/index";
 export * from "./utils";
 export * from "./types/property";
+// Explicitly export PromptModal to ensure availability at package root
+export { default as PromptModal } from "./components/core/PromptModal";