@myrjfa/ui 2.1.8 → 2.2.0

package/dist/main/navbar.js

@@ -1,12 +1,12 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Popover, PopoverContent, PopoverTrigger } from "@radix-ui/react-popover";
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Popover, PopoverContent, PopoverTrigger, } from "@radix-ui/react-popover";
 import { Separator } from "@radix-ui/react-separator";
 import { logoutUser } from "@myrjfa/state/dist/lib/actions/auth";
-import { isLoggedInAtom, userAtom, userLoadingAtom } from "@myrjfa/state/dist/lib/userAtom";
+import { isLoggedInAtom, userAtom, userLoadingAtom, } from "@myrjfa/state/dist/lib/userAtom";
 import { opportunityTypeOptions } from "@myrjfa/state/dist/lib/models/opportunities/opportunity";
 import { useAtom, useAtomValue } from "jotai";
-import { ChevronDown, Globe, Heart, LayoutDashboardIcon, Store, Target, Luggage, Compass, Mountain, Users, Sparkles, BedDouble, Ticket, Car, Package } from "lucide-react";
+import { ChevronDown, Globe, Heart, LayoutDashboardIcon, BookOpen, CalendarDays, Store, Target, Luggage, Compass, Mountain, Users, Sparkles, BedDouble, Briefcase, Ticket, Car, Camera, GraduationCap, HandHeart, Laptop, Package, } from "lucide-react";
 import Link from "next/link";
 import { useRouter, usePathname } from "next/navigation";
 import { useEffect, useState } from "react";
@@ -18,7 +18,7 @@ import { Avatar, AvatarFallback, AvatarImage } from "../misc/avatar";
 import { Button } from "../misc/button";
 import { Label } from "../misc/label";
 import { MobileNotificationBell, NotificationBell } from "../misc/notification";
-export function Navbar({ dark = false }) {
+export default function Navbar({ dark = false }) {
     var _a, _b;
     const router = useRouter();
     const pathname = usePathname();
@@ -26,6 +26,20 @@ export function Navbar({ dark = false }) {
     const loading = useAtomValue(userLoadingAtom);
     const [isLoggedIn, setIsLoggedIn] = useAtom(isLoggedInAtom);
     const [scrolled, setScrolled] = useState(false);
+    const [opportunitiesOpen, setOpportunitiesOpen] = useState(false);
+    const [toursOpen, setToursOpen] = useState(false);
+    const [exploreOpen, setExploreOpen] = useState(false);
+    const [profileOpen, setProfileOpen] = useState(false);
+    const [mobileOpenSections, setMobileOpenSections] = useState({});
+    const closeDesktopMenus = () => {
+        setOpportunitiesOpen(false);
+        setToursOpen(false);
+        setExploreOpen(false);
+        setProfileOpen(false);
+    };
+    const toggleMobileSection = (section) => {
+        setMobileOpenSections((prev) => ({ ...prev, [section]: !prev[section] }));
+    };
     useEffect(() => {
         const handleScroll = () => {
             setScrolled(window.scrollY > 10);
@@ -36,8 +50,11 @@ export function Navbar({ dark = false }) {
             window.removeEventListener("scroll", handleScroll);
         };
     }, []);
+    useEffect(() => {
+        closeDesktopMenus();
+    }, [pathname]);
     if (loading)
-        return _jsx("div", { className: "w-full h-screen flex items-center justify-center", children: "Loading..." });
+        return (_jsx("div", { className: "w-full h-screen flex items-center justify-center", children: "Loading..." }));
     const logout = async () => {
         var _a;
         const role = (currentUser === null || currentUser === void 0 ? void 0 : currentUser.role) || "user";
@@ -50,9 +67,9 @@ export function Navbar({ dark = false }) {
         else
             await showAlert((_a = response.message) !== null && _a !== void 0 ? _a : "Logged out successfully");
     };
-    const darkHeroPaths = ['/stays', '/events', '/adventures', '/rentals'];
-    const isDarkHeroPage = darkHeroPaths.includes(pathname || '');
-    const effectiveDark = (isDarkHeroPage && !scrolled) ? true : dark;
+    const darkHeroPaths = ["/events", "/adventures"];
+    const isDarkHeroPage = darkHeroPaths.includes(pathname || "");
+    const effectiveDark = isDarkHeroPage && !scrolled ? true : dark;
     const navbarBg = scrolled
         ? effectiveDark
             ? "bg-foreground/50 backdrop-blur-md"
@@ -62,42 +79,54 @@ export function Navbar({ dark = false }) {
     const textColor = effectiveDark ? "text-white" : "text-foreground";
     const navItemColor = effectiveDark
         ? "text-white/90 hover:text-white"
-        : "text-muted-foreground hover:text-foreground";
-    return (_jsx("header", { className: `fixed top-0 left-0 z-[100] mx-auto transition-all duration-300 w-full ${navbarBg} ${textColor} ${navbarBorder}`, children: _jsxs("div", { className: "mx-auto flex items-center justify-between gap-10 py-4 px-4 lg:px-8", children: [_jsxs(Link, { href: "/", className: "flex items-center gap-3", children: [_jsxs(Avatar, { className: "ml-2 -mr-4.5", children: [_jsx(AvatarImage, { src: "/images/logoicon.webp" }), _jsxs(AvatarFallback, { children: [(currentUser === null || currentUser === void 0 ? void 0 : currentUser.firstName.charAt(0)) || "D", (currentUser === null || currentUser === void 0 ? void 0 : currentUser.lastName.charAt(0)) || "P"] })] }), _jsx("span", { className: "font-heading text-xl font-bold", children: "rippeaze" })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("nav", { className: "hidden md:flex items-center gap-10 justify-end", children: [_jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs("button", { className: `flex items-center gap-1 text-sm font-medium cursor-pointer ${navItemColor}`, children: [_jsx(Target, { className: "h-5 w-5" }), _jsx("span", { children: "Opportunities" }), _jsx(ChevronDown, { className: "h-4 w-4" })] }) }), _jsx(PopoverContent, { className: "w-56 p-2 mt-3 bg-white rounded-lg shadow-lg border", align: "start", sideOffset: 5, children: _jsx("div", { className: "flex flex-col", children: opportunityTypeOptions.map((opt) => (_jsxs(Link, { href: `/opportunities?type=${opt.value}`, className: "px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 rounded-md flex flex-col", children: [_jsx("span", { className: "font-medium", children: opt.label }), _jsx("span", { className: "text-xs text-gray-500", children: opt.description })] }, opt.value))) }) })] }), _jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs("button", { className: `flex items-center gap-1 text-sm font-medium cursor-pointer ${navItemColor}`, children: [_jsx(Luggage, { className: "h-5 w-5" }), _jsx("span", { children: "Tours" }), _jsx(ChevronDown, { className: "h-4 w-4" })] }) }), _jsx(PopoverContent, { className: "w-64 p-2 mt-3 bg-white rounded-xl shadow-xl border", align: "start", sideOffset: 5, children: _jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsx("p", { className: "text-[10px] font-black uppercase tracking-widest text-gray-400 px-3 pt-1 pb-0.5", children: "Book an Experience" }), _jsxs(Link, { href: "/packages", className: "px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 rounded-lg flex items-center gap-3", children: [_jsx(Package, { className: "h-4 w-4 text-primary flex-shrink-0" }), _jsxs("div", { children: [_jsx("p", { className: "font-semibold", children: "Packages" }), _jsx("p", { className: "text-xs text-gray-400", children: "Curated all-inclusive tours" })] })] }), _jsxs(Link, { href: "/adventures", className: "px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 rounded-lg flex items-center gap-3", children: [_jsx(Mountain, { className: "h-4 w-4 text-primary flex-shrink-0" }), _jsxs("div", { children: [_jsx("p", { className: "font-semibold", children: "Adventures" }), _jsx("p", { className: "text-xs text-gray-400", children: "Treks, rafting & thrills" })] })] }), _jsxs(Link, { href: "/stays", className: "px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 rounded-lg flex items-center gap-3", children: [_jsx(BedDouble, { className: "h-4 w-4 text-primary flex-shrink-0" }), _jsxs("div", { children: [_jsx("p", { className: "font-semibold", children: "Stays" }), _jsx("p", { className: "text-xs text-gray-400", children: "Hotels, hostels & homestays" })] })] }), _jsxs(Link, { href: "/rentals", className: "px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 rounded-lg flex items-center gap-3", children: [_jsx(Car, { className: "h-4 w-4 text-primary flex-shrink-0" }), _jsxs("div", { children: [_jsx("p", { className: "font-semibold", children: "Rentals" }), _jsx("p", { className: "text-xs text-gray-400", children: "Bikes, cars & gear" })] })] }), _jsxs(Link, { href: "/plan", className: "px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 rounded-lg flex items-center gap-3", children: [_jsx(Sparkles, { className: "h-4 w-4 text-primary flex-shrink-0" }), _jsxs("div", { children: [_jsx("p", { className: "font-semibold", children: "Plan a Trip" }), _jsx("p", { className: "text-xs text-gray-400", children: "AI-powered itinerary builder" })] })] })] }) })] }), _jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs("button", { className: `flex items-center gap-1 text-sm font-medium cursor-pointer ${navItemColor}`, children: [_jsx(Compass, { className: "h-5 w-5" }), _jsx("span", { children: "Explore" }), _jsx(ChevronDown, { className: "h-4 w-4" })] }) }), _jsx(PopoverContent, { className: "w-64 p-2 mt-3 bg-white rounded-xl shadow-xl border", align: "start", sideOffset: 5, children: _jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsx("p", { className: "text-[10px] font-black uppercase tracking-widest text-gray-400 px-3 pt-1 pb-0.5", children: "Discover" }), _jsxs(Link, { href: "/events", className: "px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 rounded-lg flex items-center gap-3", children: [_jsx(Ticket, { className: "h-4 w-4 text-primary flex-shrink-0" }), _jsxs("div", { children: [_jsx("p", { className: "font-semibold", children: "Events" }), _jsx("p", { className: "text-xs text-gray-400", children: "Festivals, workshops & more" })] })] }), _jsxs(Link, { href: "/blogs", className: "px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 rounded-lg flex items-center gap-3", children: [_jsx(Globe, { className: "h-4 w-4 text-primary flex-shrink-0" }), _jsxs("div", { children: [_jsx("p", { className: "font-semibold", children: "Blogs" }), _jsx("p", { className: "text-xs text-gray-400", children: "Travel stories & guides" })] })] }), _jsx("p", { className: "text-[10px] font-black uppercase tracking-widest text-gray-400 px-3 pt-2 pb-0.5", children: "Community" }), _jsxs(Link, { href: "/find-companion", className: "px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 rounded-lg flex items-center gap-3", children: [_jsx(Users, { className: "h-4 w-4 text-primary flex-shrink-0" }), _jsxs("div", { children: [_jsx("p", { className: "font-semibold", children: "Find Companions" }), _jsx("p", { className: "text-xs text-gray-400", children: "Connect with travel buddies" })] })] }), _jsx("p", { className: "text-[10px] font-black uppercase tracking-widest text-gray-400 px-3 pt-2 pb-0.5", children: "Destinations" }), _jsxs(Link, { href: "/places", className: "px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 rounded-lg flex items-center gap-3", children: [_jsx(Globe, { className: "h-4 w-4 text-primary flex-shrink-0" }), _jsxs("div", { children: [_jsx("p", { className: "font-semibold", children: "Explore Places" }), _jsx("p", { className: "text-xs text-gray-400", children: "Countries, cities & landmarks" })] })] })] }) })] }), currentUser ? _jsx(NavItem, { icon: _jsx(Store, { className: "h-5 w-5" }), label: "Become a Partner", href: "/contact", className: navItemColor })
-                                    : _jsx(NavItem, { icon: _jsx(Store, { className: "h-5 w-5" }), label: "Register as Business", href: "/auth/register?role=host", className: navItemColor }), isLoggedIn && _jsx(NotificationBell, { navItemColor: navItemColor, userId: (currentUser === null || currentUser === void 0 ? void 0 : currentUser.role) !== "host" ? currentUser === null || currentUser === void 0 ? void 0 : currentUser.id : undefined, hostId: (currentUser === null || currentUser === void 0 ? void 0 : currentUser.role) === "host" ? currentUser === null || currentUser === void 0 ? void 0 : currentUser.id : undefined })] }), _jsx("div", { className: "hidden md:flex items-center gap-2", children: _jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(Button, { variant: "link", className: "flex w-full gap-1 cursor-pointer", children: _jsxs(Avatar, { className: "ml-5 mr-4.5", children: [_jsx(AvatarImage, { src: (_a = currentUser === null || currentUser === void 0 ? void 0 : currentUser.profilePic) !== null && _a !== void 0 ? _a : "/images/profile_placeholder.webp" }), _jsxs(AvatarFallback, { children: [(currentUser === null || currentUser === void 0 ? void 0 : currentUser.firstName.charAt(0)) || "D", (currentUser === null || currentUser === void 0 ? void 0 : currentUser.lastName.charAt(0)) || "P"] })] }) }) }), _jsx(PopoverContent, { className: `w-full p-0 mt-3 bg-${dark ? "primary" : "white"} rounded-lg shadow-lg`, align: "end", sideOffset: 5, children: _jsxs("div", { className: "py-2 w-full", children: [_jsxs("div", { className: "px-4 py-3 border-b w-full", children: [_jsx("p", { className: "text-sm font-medium", children: (currentUser === null || currentUser === void 0 ? void 0 : currentUser.username) || "Guest" }), _jsx("p", { className: "text-xs text-gray-500", children: (currentUser === null || currentUser === void 0 ? void 0 : currentUser.email) || "user@example.com" })] }), _jsxs("div", { className: "flex flex-col", children: [isLoggedIn ?
-                                                            _jsxs(Link, { href: `/profile/${(currentUser === null || currentUser === void 0 ? void 0 : currentUser.role) || "user"}/${(currentUser === null || currentUser === void 0 ? void 0 : currentUser.username) || "Guest"}`, className: "w-full py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 flex items-center gap-2", children: [_jsxs(Avatar, { className: "w-4 h-4", children: [_jsx(AvatarImage, { src: (_b = currentUser === null || currentUser === void 0 ? void 0 : currentUser.profilePic) !== null && _b !== void 0 ? _b : "/images/profile_placeholder.webp" }), _jsx(AvatarFallback, { children: "U" })] }), "Profile"] }) :
-                                                            _jsxs(Button, { variant: "ghost", onClick: () => router.push('/auth/login?role=user'), className: "w-full py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 flex items-center gap-2 justify-start", children: [_jsxs(Avatar, { className: "w-4 h-4", children: [_jsx(AvatarImage, { src: "/images/profile_placeholder.webp" }), _jsx(AvatarFallback, { children: "U" })] }), "Login As Volunteer"] }), isLoggedIn && _jsxs(Link, { href: (currentUser === null || currentUser === void 0 ? void 0 : currentUser.role) === 'host' || (currentUser === null || currentUser === void 0 ? void 0 : currentUser.role) === 'admin' ? `/dashboard/host/overview` : `/overview/${(currentUser === null || currentUser === void 0 ? void 0 : currentUser.role) || 'user'}`, className: "w-full py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 flex items-center gap-2", children: [_jsx(LayoutDashboardIcon, { className: "h-4 w-4" }), "Dashboard"] }), isLoggedIn && ((currentUser === null || currentUser === void 0 ? void 0 : currentUser.role) === "user" || (currentUser === null || currentUser === void 0 ? void 0 : currentUser.role) == null) &&
-                                                            _jsxs(Link, { href: "/overview/user#bookings", className: "w-full py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 flex items-center gap-2", children: [_jsx(Luggage, { className: "h-4 w-4" }), "My Bookings"] }), isLoggedIn && ((currentUser === null || currentUser === void 0 ? void 0 : currentUser.role) === "user" || (currentUser === null || currentUser === void 0 ? void 0 : currentUser.role) == null) &&
-                                                            _jsxs(Link, { href: "/opportunities/favourites", className: "w-full py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 flex items-center gap-2", children: [_jsx(Heart, { className: "h-4 w-4" }), "Favourites"] }), (currentUser === null || currentUser === void 0 ? void 0 : currentUser.role) === "host" ?
-                                                            _jsxs(Button, { variant: "ghost", onClick: async () => {
+        : "text-foreground hover:text-primary";
+    const isHostAccount = (currentUser === null || currentUser === void 0 ? void 0 : currentUser.role) === "host" || (currentUser === null || currentUser === void 0 ? void 0 : currentUser.role) === "admin";
+    const opportunityIconMap = {
+        volunteer: HandHeart,
+        internship: GraduationCap,
+        freelance: Laptop,
+        job: Briefcase,
+        contentCreator: Camera,
+    };
+    return (_jsx("header", { className: `fixed top-0 left-0 z-[100] mx-auto transition-all duration-300 w-full ${navbarBg} ${textColor} ${navbarBorder}`, children: _jsxs("div", { className: "mx-auto flex items-center justify-between gap-10 py-4 px-4 lg:px-8", children: [_jsxs(Link, { href: "/", className: "flex items-center gap-3", children: [_jsxs(Avatar, { className: "ml-2 -mr-4.5", children: [_jsx(AvatarImage, { src: "/images/logoicon.webp" }), _jsxs(AvatarFallback, { children: [(currentUser === null || currentUser === void 0 ? void 0 : currentUser.firstName.charAt(0)) || "D", (currentUser === null || currentUser === void 0 ? void 0 : currentUser.lastName.charAt(0)) || "P"] })] }), _jsx("span", { className: "font-heading text-xl font-bold", children: "rippeaze" })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("nav", { className: "hidden md:flex items-center gap-10 justify-end", children: [_jsxs(Popover, { open: opportunitiesOpen, onOpenChange: setOpportunitiesOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs("button", { className: `flex items-center gap-1 text-sm font-medium cursor-pointer ${navItemColor}`, children: [_jsx(Target, { className: "h-5 w-5" }), _jsx("span", { children: "Opportunities" }), _jsx(ChevronDown, { className: "h-4 w-4" })] }) }), _jsx(PopoverContent, { className: "w-64 p-2 mt-3 bg-white rounded-xl shadow-xl border", align: "start", sideOffset: 5, onClick: closeDesktopMenus, children: _jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsx("p", { className: "text-[10px] font-black uppercase tracking-widest text-gray-400 px-3 pt-1 pb-0.5", children: "Work & Create" }), opportunityTypeOptions.map((opt) => {
+                                                        var _a;
+                                                        const Icon = (_a = opportunityIconMap[opt.value]) !== null && _a !== void 0 ? _a : Target;
+                                                        return (_jsxs(Link, { href: `/opportunities?type=${opt.value}`, className: "px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 rounded-lg flex items-center gap-3", children: [_jsx(Icon, { className: "h-4 w-4 text-primary flex-shrink-0" }), _jsxs("div", { children: [_jsx("p", { className: "font-semibold", children: opt.label }), _jsx("p", { className: "text-xs text-gray-400", children: opt.description })] })] }, opt.value));
+                                                    })] }) })] }), _jsxs(Popover, { open: toursOpen, onOpenChange: setToursOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs("button", { className: `flex items-center gap-1 text-sm font-medium cursor-pointer ${navItemColor}`, children: [_jsx(Luggage, { className: "h-5 w-5" }), _jsx("span", { children: "Tours" }), _jsx(ChevronDown, { className: "h-4 w-4" })] }) }), _jsx(PopoverContent, { className: "w-64 p-2 mt-3 bg-white rounded-xl shadow-xl border", align: "start", sideOffset: 5, onClick: closeDesktopMenus, children: _jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsx("p", { className: "text-[10px] font-black uppercase tracking-widest text-gray-400 px-3 pt-1 pb-0.5", children: "Book an Experience" }), _jsxs(Link, { href: "/packages", className: "px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 rounded-lg flex items-center gap-3", children: [_jsx(Package, { className: "h-4 w-4 text-primary flex-shrink-0" }), _jsxs("div", { children: [_jsx("p", { className: "font-semibold", children: "Packages" }), _jsx("p", { className: "text-xs text-gray-400", children: "Curated all-inclusive tours" })] })] }), _jsxs(Link, { href: "/adventures", className: "px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 rounded-lg flex items-center gap-3", children: [_jsx(Mountain, { className: "h-4 w-4 text-primary flex-shrink-0" }), _jsxs("div", { children: [_jsx("p", { className: "font-semibold", children: "Adventures" }), _jsx("p", { className: "text-xs text-gray-400", children: "Treks, rafting & thrills" })] })] }), _jsxs(Link, { href: "/stays", className: "px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 rounded-lg flex items-center gap-3", children: [_jsx(BedDouble, { className: "h-4 w-4 text-primary flex-shrink-0" }), _jsxs("div", { children: [_jsx("p", { className: "font-semibold", children: "Stays" }), _jsx("p", { className: "text-xs text-gray-400", children: "Hotels, hostels & homestays" })] })] }), _jsxs(Link, { href: "/rentals", className: "px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 rounded-lg flex items-center gap-3", children: [_jsx(Car, { className: "h-4 w-4 text-primary flex-shrink-0" }), _jsxs("div", { children: [_jsx("p", { className: "font-semibold", children: "Rentals" }), _jsx("p", { className: "text-xs text-gray-400", children: "Bikes, cars & gear" })] })] }), _jsxs(Link, { href: "/plan", className: "px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 rounded-lg flex items-center gap-3", children: [_jsx(Sparkles, { className: "h-4 w-4 text-primary flex-shrink-0" }), _jsxs("div", { children: [_jsx("p", { className: "font-semibold", children: "Plan a Trip" }), _jsx("p", { className: "text-xs text-gray-400", children: "AI-powered itinerary builder" })] })] })] }) })] }), _jsxs(Popover, { open: exploreOpen, onOpenChange: setExploreOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs("button", { className: `flex items-center gap-1 text-sm font-medium cursor-pointer ${navItemColor}`, children: [_jsx(Compass, { className: "h-5 w-5" }), _jsx("span", { children: "Explore" }), _jsx(ChevronDown, { className: "h-4 w-4" })] }) }), _jsx(PopoverContent, { className: "w-64 p-2 mt-3 bg-white rounded-xl shadow-xl border", align: "start", sideOffset: 5, onClick: closeDesktopMenus, children: _jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsx("p", { className: "text-[10px] font-black uppercase tracking-widest text-gray-400 px-3 pt-1 pb-0.5", children: "Discover" }), _jsxs(Link, { href: "/events", className: "px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 rounded-lg flex items-center gap-3", children: [_jsx(Ticket, { className: "h-4 w-4 text-primary flex-shrink-0" }), _jsxs("div", { children: [_jsx("p", { className: "font-semibold", children: "Events" }), _jsx("p", { className: "text-xs text-gray-400", children: "Festivals, workshops & more" })] })] }), _jsxs(Link, { href: "/blogs", className: "px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 rounded-lg flex items-center gap-3", children: [_jsx(Globe, { className: "h-4 w-4 text-primary flex-shrink-0" }), _jsxs("div", { children: [_jsx("p", { className: "font-semibold", children: "Blogs" }), _jsx("p", { className: "text-xs text-gray-400", children: "Travel stories & guides" })] })] }), _jsx("p", { className: "text-[10px] font-black uppercase tracking-widest text-gray-400 px-3 pt-2 pb-0.5", children: "Community" }), _jsxs(Link, { href: "/find-companion", className: "px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 rounded-lg flex items-center gap-3", children: [_jsx(Users, { className: "h-4 w-4 text-primary flex-shrink-0" }), _jsxs("div", { children: [_jsx("p", { className: "font-semibold", children: "Find Companions" }), _jsx("p", { className: "text-xs text-gray-400", children: "Connect with travel buddies" })] })] }), _jsx("p", { className: "text-[10px] font-black uppercase tracking-widest text-gray-400 px-3 pt-2 pb-0.5", children: "Destinations" }), _jsxs(Link, { href: "/places", className: "px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 rounded-lg flex items-center gap-3", children: [_jsx(Globe, { className: "h-4 w-4 text-primary flex-shrink-0" }), _jsxs("div", { children: [_jsx("p", { className: "font-semibold", children: "Explore Places" }), _jsx("p", { className: "text-xs text-gray-400", children: "Countries, cities & landmarks" })] })] })] }) })] }), currentUser ? (_jsx(NavItem, { icon: _jsx(Store, { className: "h-5 w-5" }), label: "Become a Partner", href: "/contact", className: navItemColor })) : (_jsx(NavItem, { icon: _jsx(Store, { className: "h-5 w-5" }), label: "Register as Business", href: "/auth/register?role=host", className: navItemColor })), isLoggedIn && (_jsx(NotificationBell, { navItemColor: navItemColor, userId: (currentUser === null || currentUser === void 0 ? void 0 : currentUser.role) !== "host" ? currentUser === null || currentUser === void 0 ? void 0 : currentUser.id : undefined, hostId: (currentUser === null || currentUser === void 0 ? void 0 : currentUser.role) === "host" ? currentUser === null || currentUser === void 0 ? void 0 : currentUser.id : undefined }))] }), _jsx("div", { className: "hidden md:flex items-center gap-2", children: _jsxs(Popover, { open: profileOpen, onOpenChange: setProfileOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(Button, { variant: "link", className: "flex w-full gap-1 cursor-pointer", children: _jsxs(Avatar, { className: "ml-5 mr-4.5", children: [_jsx(AvatarImage, { src: (_a = currentUser === null || currentUser === void 0 ? void 0 : currentUser.profilePic) !== null && _a !== void 0 ? _a : "/images/profile_placeholder.webp" }), _jsxs(AvatarFallback, { children: [(currentUser === null || currentUser === void 0 ? void 0 : currentUser.firstName.charAt(0)) || "D", (currentUser === null || currentUser === void 0 ? void 0 : currentUser.lastName.charAt(0)) || "P"] })] }) }) }), _jsx(PopoverContent, { className: `w-full p-0 mt-3 bg-${dark ? "primary" : "white"} rounded-lg shadow-lg`, align: "end", sideOffset: 5, onClick: closeDesktopMenus, children: _jsxs("div", { className: "py-2 w-full", children: [_jsxs("div", { className: "px-4 py-3 border-b w-full", children: [_jsx("p", { className: "text-sm font-medium", children: (currentUser === null || currentUser === void 0 ? void 0 : currentUser.username) || "Guest" }), _jsx("p", { className: "text-xs text-gray-500", children: (currentUser === null || currentUser === void 0 ? void 0 : currentUser.email) || "user@example.com" })] }), _jsxs("div", { className: "flex flex-col", children: [isLoggedIn ? (_jsxs(Link, { href: `/profile/${(currentUser === null || currentUser === void 0 ? void 0 : currentUser.role) || "user"}/${(currentUser === null || currentUser === void 0 ? void 0 : currentUser.username) || "Guest"}`, className: "w-full py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 flex items-center gap-2", children: [_jsxs(Avatar, { className: "w-4 h-4", children: [_jsx(AvatarImage, { src: (_b = currentUser === null || currentUser === void 0 ? void 0 : currentUser.profilePic) !== null && _b !== void 0 ? _b : "/images/profile_placeholder.webp" }), _jsx(AvatarFallback, { children: "U" })] }), "Profile"] })) : (_jsxs(Button, { variant: "ghost", asChild: true, className: "w-full py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 flex items-center gap-2 justify-start", children: [_jsx(Link, { href: "/auth/login?role=user" }), _jsxs(Avatar, { className: "w-4 h-4", children: [_jsx(AvatarImage, { src: "/images/profile_placeholder.webp" }), _jsx(AvatarFallback, { children: "U" })] }), "Login As User"] })), isLoggedIn && (_jsxs(Link, { href: isHostAccount
+                                                                ? `/dashboard/${(currentUser === null || currentUser === void 0 ? void 0 : currentUser.role) || "host"}/overview`
+                                                                : `/dashboard/${(currentUser === null || currentUser === void 0 ? void 0 : currentUser.role) || "user"}`, className: "w-full py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 flex items-center gap-2", children: [_jsx(LayoutDashboardIcon, { className: "h-4 w-4" }), "Dashboard"] })), isLoggedIn && isHostAccount && (_jsxs(_Fragment, { children: [_jsxs(Link, { href: "/dashboard/host/bookings", className: "w-full py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 flex items-center gap-2", children: [_jsx(BookOpen, { className: "h-4 w-4" }), "Bookings"] }), _jsxs(Link, { href: "/dashboard/host/rentals/manage", className: "w-full py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 flex items-center gap-2", children: [_jsx(CalendarDays, { className: "h-4 w-4" }), "Calendar"] })] })), isLoggedIn &&
+                                                            ((currentUser === null || currentUser === void 0 ? void 0 : currentUser.role) === "user" ||
+                                                                (currentUser === null || currentUser === void 0 ? void 0 : currentUser.role) == null) && (_jsxs(Link, { href: "/dashboard/user/bookings", className: "w-full py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 flex items-center gap-2", children: [_jsx(Luggage, { className: "h-4 w-4" }), "My Bookings"] })), isLoggedIn &&
+                                                            ((currentUser === null || currentUser === void 0 ? void 0 : currentUser.role) === "user" ||
+                                                                (currentUser === null || currentUser === void 0 ? void 0 : currentUser.role) == null) && (_jsxs(Link, { href: "/opportunities/favourites", className: "w-full py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 flex items-center gap-2", children: [_jsx(Heart, { className: "h-4 w-4" }), "Favourites"] })), (currentUser === null || currentUser === void 0 ? void 0 : currentUser.role) === "host" ? (_jsxs(Button, { variant: "ghost", onClick: async () => {
+                                                                await logout();
+                                                                router.push("/auth/login?role=user");
+                                                            }, className: "w-full py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 flex items-center gap-2 justify-start", children: [_jsxs(Avatar, { className: "w-4 h-4", children: [_jsx(AvatarImage, { src: "/images/profile_placeholder.webp" }), _jsx(AvatarFallback, { children: "U" })] }), "Login As User"] })) : (_jsxs(Button, { variant: "ghost", onClick: async () => {
+                                                                if (isLoggedIn) {
                                                                     await logout();
-                                                                    router.push('/auth/login?role=user');
-                                                                }, className: "w-full py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 flex items-center gap-2 justify-start", children: [_jsxs(Avatar, { className: "w-4 h-4", children: [_jsx(AvatarImage, { src: "/images/profile_placeholder.webp" }), _jsx(AvatarFallback, { children: "U" })] }), "Login As Volunteer"] })
-                                                            :
-                                                                _jsxs(Button, { variant: "ghost", onClick: async () => {
-                                                                        if (isLoggedIn) {
-                                                                            await logout();
-                                                                        }
-                                                                        router.push('/auth/login?role=host');
-                                                                    }, className: "w-full py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 flex items-center gap-2 justify-start", children: [_jsxs(Avatar, { className: "w-4 h-4", children: [_jsx(AvatarImage, { src: "/images/profile_placeholder.webp" }), _jsx(AvatarFallback, { children: "H" })] }), "Login As Business"] }), _jsx(Separator, { className: "my-1" }), isLoggedIn && _jsx(Button, { variant: "outline", className: "py-2 mx-2 text-sm text-gray-700 hover:bg-gray-100 justify-center cursor-pointer", onClick: () => {
+                                                                }
+                                                                router.push("/auth/login?role=host");
+                                                            }, className: "w-full py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 flex items-center gap-2 justify-start", children: [_jsxs(Avatar, { className: "w-4 h-4", children: [_jsx(AvatarImage, { src: "/images/profile_placeholder.webp" }), _jsx(AvatarFallback, { children: "H" })] }), "Login As Business"] })), _jsx(Separator, { className: "my-1" }), isLoggedIn && (_jsx(Button, { variant: "outline", className: "py-2 mx-2 text-sm text-gray-700 hover:bg-gray-100 justify-center cursor-pointer", onClick: () => {
                                                                 logout();
-                                                            }, children: "Sign out" })] })] }) })] }) })] }), _jsx(MobileNavbar, { children: _jsx("div", { className: `rounded-b-lg py-4 px-4 shadow-xl ${"bg-background"} ${textColor}`, children: _jsxs("nav", { className: "flex flex-col gap-1 pt-2", children: [_jsxs("div", { className: "flex flex-col", children: [_jsxs("div", { className: "flex items-center gap-2 py-2 px-2 text-muted-foreground", children: [_jsx(Target, { className: "h-5 w-5" }), _jsx("span", { className: "text-sm font-medium", children: "Opportunities" })] }), _jsx("div", { className: "pl-8 flex flex-col gap-1", children: opportunityTypeOptions.map((opt) => (_jsx(Link, { href: `/opportunities?type=${opt.value}`, className: "py-1.5 px-2 text-sm text-gray-600 hover:text-foreground hover:bg-gray-100 rounded", children: opt.label }, opt.value))) })] }), _jsxs("div", { className: "flex flex-col", children: [_jsxs("div", { className: "flex items-center gap-2 py-2 px-2 text-muted-foreground", children: [_jsx(Luggage, { className: "h-5 w-5" }), _jsx("span", { className: "text-sm font-medium", children: "Tours" })] }), _jsxs("div", { className: "pl-8 flex flex-col gap-1", children: [_jsx(Link, { href: "/packages", className: "py-1.5 px-2 text-sm text-gray-600 hover:text-foreground hover:bg-gray-100 rounded", children: "Packages" }), _jsx(Link, { href: "/adventures", className: "py-1.5 px-2 text-sm text-gray-600 hover:text-foreground hover:bg-gray-100 rounded", children: "Adventures" }), _jsx(Link, { href: "/stays", className: "py-1.5 px-2 text-sm text-gray-600 hover:text-foreground hover:bg-gray-100 rounded", children: "Stays" }), _jsx(Link, { href: "/rentals", className: "py-1.5 px-2 text-sm text-gray-600 hover:text-foreground hover:bg-gray-100 rounded", children: "Rentals" }), _jsx(Link, { href: "/plan", className: "py-1.5 px-2 text-sm text-gray-600 hover:text-foreground hover:bg-gray-100 rounded", children: "Plan a Trip \u2728" })] })] }), _jsxs("div", { className: "flex flex-col", children: [_jsxs("div", { className: "flex items-center gap-2 py-2 px-2 text-muted-foreground", children: [_jsx(Compass, { className: "h-5 w-5" }), _jsx("span", { className: "text-sm font-medium", children: "Explore" })] }), _jsxs("div", { className: "pl-8 flex flex-col gap-1", children: [_jsx(Link, { href: "/events", className: "py-1.5 px-2 text-sm text-gray-600 hover:text-foreground hover:bg-gray-100 rounded", children: "Events" }), _jsx(Link, { href: "/blogs", className: "py-1.5 px-2 text-sm text-gray-600 hover:text-foreground hover:bg-gray-100 rounded", children: "Blogs" }), _jsx(Link, { href: "/find-companion", className: "py-1.5 px-2 text-sm text-gray-600 hover:text-foreground hover:bg-gray-100 rounded", children: "Find Companions" }), _jsx(Link, { href: "/places", className: "py-1.5 px-2 text-sm text-gray-600 hover:text-foreground hover:bg-gray-100 rounded", children: "Explore Places" })] })] }), currentUser ? _jsx(MobileNavItem, { icon: _jsx(Store, { className: "h-5 w-5" }), label: "Become a Partner", href: "/contact" }) :
-                                    _jsx(MobileNavItem, { icon: _jsx(Store, { className: "h-5 w-5" }), label: "Register as Business", href: "/auth/register?role=host" }), isLoggedIn && _jsx(MobileNotificationBell, {}), isLoggedIn && _jsx(MobileNavItem, { icon: _jsx(LayoutDashboardIcon, { className: "h-5 w-5" }), label: "Dashboard", href: (currentUser === null || currentUser === void 0 ? void 0 : currentUser.role) === 'host' || (currentUser === null || currentUser === void 0 ? void 0 : currentUser.role) === 'admin' ? `/dashboard/host/overview` : `/overview/${(currentUser === null || currentUser === void 0 ? void 0 : currentUser.role) || 'user'}`, className: "md:hidden" }), isLoggedIn && ((currentUser === null || currentUser === void 0 ? void 0 : currentUser.role) === "user" || (currentUser === null || currentUser === void 0 ? void 0 : currentUser.role) == null) &&
-                                    _jsx(MobileNavItem, { icon: _jsx(Luggage, { className: "h-5 w-5" }), label: "My Bookings", href: "/overview/user#bookings", className: "md:hidden" }), isLoggedIn && ((currentUser === null || currentUser === void 0 ? void 0 : currentUser.role) === "user" || (currentUser === null || currentUser === void 0 ? void 0 : currentUser.role) == null) &&
-                                    _jsx(MobileNavItem, { icon: _jsx(Heart, { className: "h-5 w-5" }), label: "Favourites", href: "/opportunities/favourites", className: "md:hidden" }), isLoggedIn ? _jsxs(Link, { href: `/profile/${(currentUser === null || currentUser === void 0 ? void 0 : currentUser.role) || "user"}/${(currentUser === null || currentUser === void 0 ? void 0 : currentUser.username) || "Guest"}`, className: "flex w-full gap-1 cursor-pointer my-2", children: [_jsxs(Avatar, { className: "w-5 h-5 ml-2", children: [_jsx(AvatarImage, { src: (currentUser === null || currentUser === void 0 ? void 0 : currentUser.profilePic) || "/images/profile_placeholder.webp" }), _jsx(AvatarFallback, { children: "DP" })] }), _jsx(Label, { htmlFor: "username", className: "cursor-pointer text-muted-foreground hover:text-foreground", children: (currentUser === null || currentUser === void 0 ? void 0 : currentUser.username) || "Guest" })] }) :
-                                    _jsxs(Link, { href: "/auth/login", className: "flex w-full gap-1 cursor-pointer my-2", children: [_jsxs(Avatar, { className: "w-5 h-5 ml-2", children: [_jsx(AvatarImage, { src: "/images/profile_placeholder.webp" }), _jsx(AvatarFallback, { children: "U" })] }), _jsx(Label, { htmlFor: "username", className: "cursor-pointer text-muted-foreground hover:text-foreground", children: "Login As Volunteer" })] }), (currentUser === null || currentUser === void 0 ? void 0 : currentUser.role) === "host" ?
-                                    _jsxs(Button, { variant: "ghost", onClick: async () => {
+                                                            }, children: "Sign out" }))] })] }) })] }) })] }), _jsx(MobileNavbar, { children: _jsx("div", { className: `rounded-b-lg py-4 px-4 shadow-xl ${"bg-background"} ${textColor}`, children: _jsxs("nav", { className: "flex flex-col gap-1 pt-2", children: [_jsxs("div", { className: "flex flex-col", children: [_jsxs("button", { type: "button", onClick: () => toggleMobileSection("opportunities"), className: "flex w-full items-center justify-between rounded-lg py-2 px-2 text-muted-foreground hover:bg-gray-100", children: [_jsxs("span", { className: "flex items-center gap-2", children: [_jsx(Target, { className: "h-5 w-5" }), _jsx("span", { className: "text-sm font-medium", children: "Opportunities" })] }), _jsx(ChevronDown, { className: `h-4 w-4 transition-transform ${mobileOpenSections.opportunities ? "rotate-180" : ""}` })] }), mobileOpenSections.opportunities && (_jsx("div", { className: "pl-8 flex flex-col gap-1", children: opportunityTypeOptions.map((opt) => {
+                                                var _a;
+                                                const Icon = (_a = opportunityIconMap[opt.value]) !== null && _a !== void 0 ? _a : Target;
+                                                return (_jsxs(Link, { href: `/opportunities?type=${opt.value}`, className: "flex items-center gap-2 rounded px-2 py-1.5 text-sm text-gray-600 hover:bg-gray-100 hover:text-foreground", children: [_jsx(Icon, { className: "h-4 w-4 text-primary" }), opt.label] }, opt.value));
+                                            }) }))] }), _jsxs("div", { className: "flex flex-col", children: [_jsxs("button", { type: "button", onClick: () => toggleMobileSection("tours"), className: "flex w-full items-center justify-between rounded-lg py-2 px-2 text-muted-foreground hover:bg-gray-100", children: [_jsxs("span", { className: "flex items-center gap-2", children: [_jsx(Luggage, { className: "h-5 w-5" }), _jsx("span", { className: "text-sm font-medium", children: "Tours" })] }), _jsx(ChevronDown, { className: `h-4 w-4 transition-transform ${mobileOpenSections.tours ? "rotate-180" : ""}` })] }), mobileOpenSections.tours && (_jsxs("div", { className: "pl-8 flex flex-col gap-1", children: [_jsx(Link, { href: "/packages", className: "py-1.5 px-2 text-sm text-gray-600 hover:text-foreground hover:bg-gray-100 rounded", children: "Packages" }), _jsx(Link, { href: "/adventures", className: "py-1.5 px-2 text-sm text-gray-600 hover:text-foreground hover:bg-gray-100 rounded", children: "Adventures" }), _jsx(Link, { href: "/stays", className: "py-1.5 px-2 text-sm text-gray-600 hover:text-foreground hover:bg-gray-100 rounded", children: "Stays" }), _jsx(Link, { href: "/rentals", className: "py-1.5 px-2 text-sm text-gray-600 hover:text-foreground hover:bg-gray-100 rounded", children: "Rentals" }), _jsx(Link, { href: "/plan", className: "py-1.5 px-2 text-sm text-gray-600 hover:text-foreground hover:bg-gray-100 rounded", children: "Plan a Trip \u2728" })] }))] }), _jsxs("div", { className: "flex flex-col", children: [_jsxs("button", { type: "button", onClick: () => toggleMobileSection("explore"), className: "flex w-full items-center justify-between rounded-lg py-2 px-2 text-muted-foreground hover:bg-gray-100", children: [_jsxs("span", { className: "flex items-center gap-2", children: [_jsx(Compass, { className: "h-5 w-5" }), _jsx("span", { className: "text-sm font-medium", children: "Explore" })] }), _jsx(ChevronDown, { className: `h-4 w-4 transition-transform ${mobileOpenSections.explore ? "rotate-180" : ""}` })] }), mobileOpenSections.explore && (_jsxs("div", { className: "pl-8 flex flex-col gap-1", children: [_jsx(Link, { href: "/events", className: "py-1.5 px-2 text-sm text-gray-600 hover:text-foreground hover:bg-gray-100 rounded", children: "Events" }), _jsx(Link, { href: "/blogs", className: "py-1.5 px-2 text-sm text-gray-600 hover:text-foreground hover:bg-gray-100 rounded", children: "Blogs" }), _jsx(Link, { href: "/find-companion", className: "py-1.5 px-2 text-sm text-gray-600 hover:text-foreground hover:bg-gray-100 rounded", children: "Find Companions" }), _jsx(Link, { href: "/places", className: "py-1.5 px-2 text-sm text-gray-600 hover:text-foreground hover:bg-gray-100 rounded", children: "Explore Places" })] }))] }), currentUser ? (_jsx(MobileNavItem, { icon: _jsx(Store, { className: "h-5 w-5" }), label: "Become a Partner", href: "/contact" })) : (_jsx(MobileNavItem, { icon: _jsx(Store, { className: "h-5 w-5" }), label: "Register as Business", href: "/auth/register?role=host" })), isLoggedIn && _jsx(MobileNotificationBell, {}), isLoggedIn && (_jsx(MobileNavItem, { icon: _jsx(LayoutDashboardIcon, { className: "h-5 w-5" }), label: "Dashboard", href: (currentUser === null || currentUser === void 0 ? void 0 : currentUser.role) === "host" ||
+                                        (currentUser === null || currentUser === void 0 ? void 0 : currentUser.role) === "admin"
+                                        ? `/dashboard/${(currentUser === null || currentUser === void 0 ? void 0 : currentUser.role) || "host"}/overview`
+                                        : `/dashboard/${(currentUser === null || currentUser === void 0 ? void 0 : currentUser.role) || "user"}`, className: "md:hidden" })), isLoggedIn && isHostAccount && (_jsxs(_Fragment, { children: [_jsx(MobileNavItem, { icon: _jsx(BookOpen, { className: "h-5 w-5" }), label: "Bookings", href: "/dashboard/host/bookings", className: "md:hidden" }), _jsx(MobileNavItem, { icon: _jsx(CalendarDays, { className: "h-5 w-5" }), label: "Calendar", href: "/dashboard/host/rentals/manage", className: "md:hidden" })] })), isLoggedIn &&
+                                    ((currentUser === null || currentUser === void 0 ? void 0 : currentUser.role) === "user" || (currentUser === null || currentUser === void 0 ? void 0 : currentUser.role) == null) && (_jsx(MobileNavItem, { icon: _jsx(Luggage, { className: "h-5 w-5" }), label: "My Bookings", href: "/dashboard/user/bookings", className: "md:hidden" })), isLoggedIn &&
+                                    ((currentUser === null || currentUser === void 0 ? void 0 : currentUser.role) === "user" || (currentUser === null || currentUser === void 0 ? void 0 : currentUser.role) == null) && (_jsx(MobileNavItem, { icon: _jsx(Heart, { className: "h-5 w-5" }), label: "Favourites", href: "/opportunities/favourites", className: "md:hidden" })), isLoggedIn ? (_jsxs(Link, { href: `/profile/${(currentUser === null || currentUser === void 0 ? void 0 : currentUser.role) || "user"}/${(currentUser === null || currentUser === void 0 ? void 0 : currentUser.username) || "Guest"}`, className: "flex w-full gap-1 cursor-pointer my-2", children: [_jsxs(Avatar, { className: "w-5 h-5 ml-2", children: [_jsx(AvatarImage, { src: (currentUser === null || currentUser === void 0 ? void 0 : currentUser.profilePic) ||
+                                                        "/images/profile_placeholder.webp" }), _jsx(AvatarFallback, { children: "DP" })] }), _jsx(Label, { htmlFor: "username", className: "cursor-pointer text-muted-foreground hover:text-foreground", children: (currentUser === null || currentUser === void 0 ? void 0 : currentUser.username) || "Guest" })] })) : (_jsxs(Link, { href: "/auth/login", className: "flex w-full gap-1 cursor-pointer my-2", children: [_jsxs(Avatar, { className: "w-5 h-5 ml-2", children: [_jsx(AvatarImage, { src: "/images/profile_placeholder.webp" }), _jsx(AvatarFallback, { children: "U" })] }), _jsx(Label, { htmlFor: "username", className: "cursor-pointer text-muted-foreground hover:text-foreground", children: "Login As User" })] })), (currentUser === null || currentUser === void 0 ? void 0 : currentUser.role) === "host" ? (_jsxs(Button, { variant: "ghost", onClick: async () => {
+                                        await logout();
+                                        router.push("/auth/login?role=user");
+                                    }, className: "w-full text-md text-gray-500 flex gap-1 justify-start", children: [_jsxs(Avatar, { className: "w-5 h-5 -ml-2", children: [_jsx(AvatarImage, { src: "/images/profile_placeholder.webp" }), _jsx(AvatarFallback, { children: "U" })] }), "Login As User"] })) : (_jsxs(Button, { variant: "ghost", onClick: async () => {
+                                        if (isLoggedIn) {
                                             await logout();
-                                            router.push('/auth/login?role=user');
-                                        }, className: "w-full text-md text-gray-500 flex gap-1 justify-start", children: [_jsxs(Avatar, { className: "w-5 h-5 -ml-2", children: [_jsx(AvatarImage, { src: "/images/profile_placeholder.webp" }), _jsx(AvatarFallback, { children: "U" })] }), "Login As Volunteer"] })
-                                    :
-                                        _jsxs(Button, { variant: "ghost", onClick: async () => {
-                                                if (isLoggedIn) {
-                                                    await logout();
-                                                }
-                                                router.push('/auth/login?role=host');
-                                            }, className: "w-full text-md text-gray-500 flex gap-1 justify-start", children: [_jsxs(Avatar, { className: "w-5 h-5 -ml-2", children: [_jsx(AvatarImage, { src: "/images/profile_placeholder.webp" }), _jsx(AvatarFallback, { children: "H" })] }), "Login As Business"] }), isLoggedIn && _jsx(Button, { variant: "outline", className: "py-2 mx-2 text-sm text-gray-700 hover:bg-gray-100 justify-center cursor-pointer", onClick: () => {
+                                        }
+                                        router.push("/auth/login?role=host");
+                                    }, className: "w-full text-md text-gray-500 flex gap-1 justify-start", children: [_jsxs(Avatar, { className: "w-5 h-5 -ml-2", children: [_jsx(AvatarImage, { src: "/images/profile_placeholder.webp" }), _jsx(AvatarFallback, { children: "H" })] }), "Login As Business"] })), isLoggedIn && (_jsx(Button, { variant: "outline", className: "py-2 mx-2 text-sm text-gray-700 hover:bg-gray-100 justify-center cursor-pointer", onClick: () => {
                                         logout();
-                                    }, children: "Sign out" })] }) }) })] }) }));
+                                    }, children: "Sign out" }))] }) }) })] }) }));
 }
-export default Navbar;

package/dist/main/portfolio/portfolioItem.d.ts

@@ -1,4 +1,4 @@
-import { PortfolioItem } from '@myrjfa/state';
+import { PortfolioItem } from "@myrjfa/state/dist/lib/models/portfolio";
 import { MouseEventHandler } from 'react';
 export declare function PortfolioItemComponent({ item, onClick }: {
     item: PortfolioItem;

package/dist/main/portfolio/portfolioItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"portfolioItem.d.ts","sourceRoot":"","sources":["../../../src/main/portfolio/portfolioItem.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAC9C,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE1C,wBAAgB,sBAAsB,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE;IACtD,IAAI,EAAE,aAAa,CAAC;IACpB,OAAO,EAAE,iBAAiB,CAAC,cAAc,CAAC,GAAG,SAAS,CAAA;CACzD,2CA2BA"}
+{"version":3,"file":"portfolioItem.d.ts","sourceRoot":"","sources":["../../../src/main/portfolio/portfolioItem.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,aAAa,EAAE,MAAM,yCAAyC,CAAC;AACxE,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE1C,wBAAgB,sBAAsB,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE;IACtD,IAAI,EAAE,aAAa,CAAC;IACpB,OAAO,EAAE,iBAAiB,CAAC,cAAc,CAAC,GAAG,SAAS,CAAA;CACzD,2CA2BA"}

package/dist/main/portfolio/portfolioPopup.d.ts

@@ -1,4 +1,4 @@
-import { PortfolioItem } from '@myrjfa/state';
+import { PortfolioItem } from "@myrjfa/state/dist/lib/models/portfolio";
 export declare function PortfolioPopUp({ items, currentIndex, firstName, profilePic }: {
     items: PortfolioItem[];
     currentIndex: number;

package/dist/main/portfolio/portfolioPopup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"portfolioPopup.d.ts","sourceRoot":"","sources":["../../../src/main/portfolio/portfolioPopup.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAI9C,wBAAgB,cAAc,CAAC,EAAE,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,UAAU,EAAE,EAAE;IAC3E,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;CACvB,2CA0LA"}
+{"version":3,"file":"portfolioPopup.d.ts","sourceRoot":"","sources":["../../../src/main/portfolio/portfolioPopup.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,aAAa,EAAE,MAAM,yCAAyC,CAAC;AAIxE,wBAAgB,cAAc,CAAC,EAAE,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,UAAU,EAAE,EAAE;IAC3E,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;CACvB,2CA0LA"}

package/dist/main/review-page.d.ts

@@ -7,7 +7,8 @@ interface ReviewPageProps {
     editable?: boolean;
     initialReviews?: Review[];
     reviewCategory?: "review" | "comment";
+    hideWhenEmpty?: boolean;
 }
-export declare function ReviewPage({ title, subtitle, targetId, targetType, editable, initialReviews, reviewCategory, }: ReviewPageProps): import("react/jsx-runtime").JSX.Element;
+export declare function ReviewPage({ title, subtitle, targetId, targetType, editable, initialReviews, reviewCategory, hideWhenEmpty, }: ReviewPageProps): import("react/jsx-runtime").JSX.Element | null;
 export {};
 //# sourceMappingURL=review-page.d.ts.map

package/dist/main/review-page.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"review-page.d.ts","sourceRoot":"","sources":["../../src/main/review-page.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,MAAM,EAAqB,gBAAgB,EAAc,MAAM,sCAAsC,CAAC;AAoD/G,UAAU,eAAe;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAC1B,cAAc,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;CACzC;AAED,wBAAgB,UAAU,CAAC,EACvB,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,UAA0B,EAC1B,QAAgB,EAChB,cAAmB,EACnB,cAAyB,GAC5B,EAAE,eAAe,2CAwQjB"}
+{"version":3,"file":"review-page.d.ts","sourceRoot":"","sources":["../../src/main/review-page.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,MAAM,EAAqB,gBAAgB,EAAc,MAAM,sCAAsC,CAAC;AAqD/G,UAAU,eAAe;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAC1B,cAAc,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IACtC,aAAa,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,wBAAgB,UAAU,CAAC,EACvB,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,UAA0B,EAC1B,QAAgB,EAChB,cAAmB,EACnB,cAAyB,EACzB,aAAqB,GACxB,EAAE,eAAe,kDAoUjB"}

package/dist/main/review-page.js

@@ -11,6 +11,7 @@ import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { deleteActions, showAlert } from "../misc/alertdialogclaude";
 import { Avatar, AvatarFallback, AvatarImage } from "../misc/avatar";
+import ImageUploader from "../components/create-flow/ImageUploader";
 import { Button } from "../misc/button";
 import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "../misc/card";
 import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage, } from "../misc/form";
@@ -19,7 +20,7 @@ import { Textarea } from "../misc/textarea";
 const StarRating = ({ value, onChange, onHover, size = 8, interactive = false }) => {
     return (_jsx("div", { className: "flex space-x-1", children: [1, 2, 3, 4, 5].map((star) => (_jsx("button", { type: "button", onClick: () => interactive && (onChange === null || onChange === void 0 ? void 0 : onChange(star)), onMouseEnter: () => interactive && (onHover === null || onHover === void 0 ? void 0 : onHover(star)), onMouseLeave: () => interactive && (onHover === null || onHover === void 0 ? void 0 : onHover(null)), className: `focus:outline-none text-${size}xl`, children: _jsx(StarIcon, { className: `h-${size} w-${size} ${star <= value ? 'text-yellow-400 fill-yellow-400' : 'text-gray-300'}` }) }, star))) }));
 };
-export function ReviewPage({ title, subtitle, targetId, targetType = "opportunity", editable = false, initialReviews = [], reviewCategory = "review", }) {
+export function ReviewPage({ title, subtitle, targetId, targetType = "opportunity", editable = false, initialReviews = [], reviewCategory = "review", hideWhenEmpty = false, }) {
     var _a;
     const user = useAtomValue(userAtom);
     const loading = useAtomValue(userLoadingAtom);
@@ -34,6 +35,9 @@ export function ReviewPage({ title, subtitle, targetId, targetType = "opportunit
     const [isDeleting, setIsDeleting] = useState(false);
     const [isFormInitialized, setIsFormInitialized] = useState(false);
     const [isLoadingMore, setIsLoadingMore] = useState(false);
+    // Image state
+    const [previewImages, setPreviewImages] = useState([]);
+    const [images, setImages] = useState([]);
     const form = useForm({
         resolver: zodResolver(reviewBasicSchema),
         defaultValues: {
@@ -115,11 +119,12 @@ export function ReviewPage({ title, subtitle, targetId, targetType = "opportunit
         setIsSubmitting(true);
         try {
             let response;
+            const submitData = { ...data, images: images };
             if (review) {
-                response = await editReview(review._id, data);
+                response = await editReview(review._id, submitData);
             }
             else {
-                response = await addReview(targetId, targetType, data);
+                response = await addReview(targetId, targetType, submitData);
             }
             if (response === null || response === void 0 ? void 0 : response.error) {
                 await showAlert(response.error, `Error reviewing ${targetType}`);
@@ -131,6 +136,8 @@ export function ReviewPage({ title, subtitle, targetId, targetType = "opportunit
                     setReview(newReview);
                     setTotalCount(prev => review ? prev : prev + 1);
                     form.reset({ rating: reviewCategory === "comment" ? 1 : newReview.rating, comment: newReview.comment || "" });
+                    setImages([]);
+                    setPreviewImages([]);
                 }
             }
         }
@@ -172,8 +179,31 @@ export function ReviewPage({ title, subtitle, targetId, targetType = "opportunit
             setIsDeleting(false);
         }
     };
+    const handleImageUpload = async (e) => {
+        const files = Array.from(e.target.files || []);
+        if (!files || files.length === 0)
+            return;
+        const MAX_IMAGE_SIZE_MB = 5;
+        const validFiles = [];
+        for (const file of files) {
+            if (file.size > MAX_IMAGE_SIZE_MB * 1024 * 1024) {
+                await showAlert(`${file.name} is too large. Max allowed size is ${MAX_IMAGE_SIZE_MB}MB.`);
+                continue;
+            }
+            validFiles.push(file);
+        }
+        const fileUrls = validFiles.map((file) => URL.createObjectURL(file));
+        setPreviewImages((prevImages) => [...prevImages, ...fileUrls]);
+        setImages((prev) => [...prev, ...validFiles]);
+    };
+    const handleRemoveImage = (index) => {
+        setImages((prev) => prev.filter((_, i) => i !== index));
+        setPreviewImages((prev) => prev.filter((_, i) => i !== index));
+    };
     if (loading || !isFormInitialized)
         return _jsx(Card, { className: "w-full h-50 flex items-center justify-center", children: "Loading Reviews..." });
+    if (hideWhenEmpty && !editable && displayReviews.length === 0)
+        return null;
     const averageRating = reviews.length ? reviews.reduce((acc, r) => acc + r.rating, 0) / reviews.length : 0;
-    return (_jsxs(Card, { className: "w-full mb-10", children: [(title || subtitle) && _jsxs(CardHeader, { children: [title && _jsx(CardTitle, { children: title }), subtitle && _jsx(CardDescription, { children: subtitle })] }), _jsxs(CardContent, { children: [editable && _jsx(Form, { ...form, children: _jsxs("form", { onSubmit: form.handleSubmit(onSubmit), className: "space-y-6 pb-4", children: [_jsx(FormField, { control: form.control, name: "rating", render: ({ field }) => (_jsxs(FormItem, { className: reviewCategory === "comment" ? "hidden" : "", children: [_jsx(FormLabel, { children: "Your Rating" }), _jsx(FormControl, { children: _jsx(StarRating, { value: ratingValue, onChange: (val) => field.onChange(val), onHover: setHoveredRating, interactive: true }) }), _jsx(FormMessage, {})] })) }), _jsx(FormField, { control: form.control, name: "comment", render: ({ field }) => (_jsxs(FormItem, { children: [_jsxs(FormLabel, { children: ["Your ", reviewCategory == "review" ? "Review" : "Comment"] }), _jsx(FormControl, { children: _jsx(Textarea, { placeholder: `Share your ${reviewCategory == "review" ? "experience" : "thoughts"}...`, className: "resize-none", rows: 4, ...field }) }), _jsx(FormMessage, {})] })) }), form.formState.errors.root && (_jsx("p", { className: "text-sm font-medium text-destructive", children: form.formState.errors.root.message })), _jsxs("div", { className: "flex flex-wrap gap-2", children: [_jsx(Button, { type: "submit", disabled: isSubmitting, className: "w-full sm:w-auto", children: isSubmitting ? (reviewCategory == "review" ? "Submitting... Review" : "Posting... Comment") : (reviewCategory == "review" ? "Submit Review" : "Post Comment") }), review && _jsx(Button, { type: "button", variant: "destructive", className: "w-full sm:w-auto", disabled: isDeleting, onClick: handleDeleteReview, children: isDeleting ? "Deleting..." : reviewCategory == "review" ? "Delete Review" : "Delete Comment" })] })] }) }), displayReviews.length > 0 ? (_jsxs("div", { className: "mt-4", children: [_jsxs("div", { className: "flex justify-between items-center mb-4", children: [_jsxs("h3", { className: "text-lg font-medium", children: [reviewCategory == "review" ? "Reviews" : "Comments", " (", totalCount || displayReviews.length, ")"] }), reviewCategory == "review" && _jsxs("div", { className: "flex items-center", children: [_jsx("span", { className: "font-medium mr-2", children: averageRating.toFixed(1) }), _jsx(StarRating, { value: Math.round(averageRating), size: 5 })] })] }), _jsx(Separator, { className: "my-4" }), _jsx("div", { className: "space-y-6", children: displayReviews.map((review) => (_jsxs("div", { className: "pb-4", children: [_jsxs("div", { className: "flex items-start justify-between", children: [_jsxs("div", { className: "flex items-center", children: [_jsxs(Avatar, { className: "h-10 w-10 mr-3", children: [_jsx(AvatarImage, { src: review.reviewerPic || "/images/profile_placeholder.webp", alt: review.reviewerUsername }), _jsx(AvatarFallback, { children: review.reviewerUsername.charAt(0) })] }), _jsxs("div", { children: [_jsx("h4", { className: "font-medium", children: review.reviewerUsername }), _jsx("p", { className: "text-sm text-gray-500", children: formatDate(review.createdAt) })] })] }), reviewCategory == "review" && _jsx(StarRating, { value: review.rating, size: 4 })] }), _jsx("p", { className: "mt-2 text-gray-600 whitespace-pre-line", children: review.comment }), _jsx(Separator, { className: "mt-4" })] }, review._id))) }), hasMore && (_jsx("div", { className: "flex justify-center mt-6", children: _jsx(Button, { variant: "outline", onClick: handleLoadMore, disabled: isLoadingMore, className: "w-full sm:w-auto", children: isLoadingMore ? "Loading more..." : "View More" }) }))] })) : (_jsxs("div", { className: "text-center justify-center p-5", children: ["No ", reviewCategory == "comment" ? "comments" : "reviews", " yet"] }))] }), displayReviews.length > 0 && _jsx(CardFooter, { children: _jsx("p", { className: "text-sm text-gray-500", children: "Thank you for sharing your feedback. All reviews are moderated and typically appear within 24-48 hours." }) })] }));
+    return (_jsxs(Card, { className: "w-full mb-10", children: [(title || subtitle) && _jsxs(CardHeader, { children: [title && _jsx(CardTitle, { children: title }), subtitle && _jsx(CardDescription, { children: subtitle })] }), _jsxs(CardContent, { children: [editable && _jsx(Form, { ...form, children: _jsxs("form", { onSubmit: form.handleSubmit(onSubmit), className: "space-y-6 pb-4", children: [_jsx(FormField, { control: form.control, name: "rating", render: ({ field }) => (_jsxs(FormItem, { className: reviewCategory === "comment" ? "hidden" : "", children: [_jsx(FormLabel, { children: "Your Rating" }), _jsx(FormControl, { children: _jsx(StarRating, { value: ratingValue, onChange: (val) => field.onChange(val), onHover: setHoveredRating, interactive: true }) }), _jsx(FormMessage, {})] })) }), _jsx(FormField, { control: form.control, name: "comment", render: ({ field }) => (_jsxs(FormItem, { children: [_jsxs(FormLabel, { children: ["Your ", reviewCategory == "review" ? "Review" : "Comment"] }), _jsx(FormControl, { children: _jsx(Textarea, { placeholder: `Share your ${reviewCategory == "review" ? "experience" : "thoughts"}...`, className: "resize-none", rows: 4, ...field }) }), _jsx(FormMessage, {})] })) }), reviewCategory === "review" && (_jsx("div", { className: "pt-2", children: _jsx(ImageUploader, { previews: previewImages, onUploadEvent: handleImageUpload, onRemove: handleRemoveImage, title: "Add Review Photos", message: "Add up to 5 photos to your review (Optional)", maxImages: 5 }) })), form.formState.errors.root && (_jsx("p", { className: "text-sm font-medium text-destructive", children: form.formState.errors.root.message })), _jsxs("div", { className: "flex flex-wrap gap-2", children: [_jsx(Button, { type: "submit", disabled: isSubmitting, className: "w-full sm:w-auto", children: isSubmitting ? (reviewCategory == "review" ? "Submitting... Review" : "Posting... Comment") : (reviewCategory == "review" ? "Submit Review" : "Post Comment") }), review && _jsx(Button, { type: "button", variant: "destructive", className: "w-full sm:w-auto", disabled: isDeleting, onClick: handleDeleteReview, children: isDeleting ? "Deleting..." : reviewCategory == "review" ? "Delete Review" : "Delete Comment" })] })] }) }), displayReviews.length > 0 ? (_jsxs("div", { className: "mt-4", children: [_jsxs("div", { className: "flex justify-between items-center mb-4", children: [_jsxs("h3", { className: "text-lg font-medium", children: [reviewCategory == "review" ? "Reviews" : "Comments", " (", totalCount || displayReviews.length, ")"] }), reviewCategory == "review" && _jsxs("div", { className: "flex items-center", children: [_jsx("span", { className: "font-medium mr-2", children: averageRating.toFixed(1) }), _jsx(StarRating, { value: Math.round(averageRating), size: 5 })] })] }), _jsx(Separator, { className: "my-4" }), _jsx("div", { className: "space-y-6", children: displayReviews.map((review) => (_jsxs("div", { className: "pb-4", children: [_jsxs("div", { className: "flex items-start justify-between", children: [_jsxs("div", { className: "flex items-center", children: [_jsxs(Avatar, { className: "h-10 w-10 mr-3", children: [_jsx(AvatarImage, { src: review.reviewerPic || "/images/profile_placeholder.webp", alt: review.reviewerUsername }), _jsx(AvatarFallback, { children: review.reviewerUsername.charAt(0) })] }), _jsxs("div", { children: [_jsx("h4", { className: "font-medium", children: review.reviewerUsername }), _jsx("p", { className: "text-sm text-gray-500", children: formatDate(review.createdAt) })] })] }), reviewCategory == "review" && _jsx(StarRating, { value: review.rating, size: 4 })] }), _jsx("p", { className: "mt-2 text-gray-600 whitespace-pre-line", children: review.comment }), review.images && review.images.length > 0 && (_jsx("div", { className: "mt-3 flex flex-wrap gap-2", children: review.images.map((img, idx) => (_jsx("div", { className: "relative w-20 h-20 rounded-md overflow-hidden border border-slate-200", children: _jsx("img", { src: img, alt: `Review photo ${idx + 1}`, className: "object-cover w-full h-full" }) }, idx))) })), _jsx(Separator, { className: "mt-4" })] }, review._id))) }), hasMore && (_jsx("div", { className: "flex justify-center mt-6", children: _jsx(Button, { variant: "outline", onClick: handleLoadMore, disabled: isLoadingMore, className: "w-full sm:w-auto", children: isLoadingMore ? "Loading more..." : "View More" }) }))] })) : (_jsxs("div", { className: "text-center justify-center p-5", children: ["No ", reviewCategory == "comment" ? "comments" : "reviews", " yet"] }))] }), displayReviews.length > 0 && _jsx(CardFooter, { children: _jsx("p", { className: "text-sm text-gray-500", children: "Thank you for sharing your feedback. All reviews are moderated and typically appear within 24-48 hours." }) })] }));
 }

package/dist/misc/accordion.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as AccordionPrimitive from "@radix-ui/react-accordion";
-import { cn } from "@myrjfa/state";
+import { cn } from "@myrjfa/state/dist/lib/utils";
 import { ChevronDownIcon } from "lucide-react";
 function Accordion({ ...props }) {
     return _jsx(AccordionPrimitive.Root, { "data-slot": "accordion", ...props });

package/dist/misc/alert-dialog.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
-import { cn } from "@myrjfa/state";
+import { cn } from "@myrjfa/state/dist/lib/utils";
 import { buttonVariants } from "./button";
 function AlertDialog({ ...props }) {
     return _jsx(AlertDialogPrimitive.Root, { "data-slot": "alert-dialog", ...props });

package/dist/misc/alert.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cn } from "@myrjfa/state";
+import { cn } from "@myrjfa/state/dist/lib/utils";
 import { cva } from "class-variance-authority";
 const alertVariants = cva("relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current", {
     variants: {

package/dist/misc/alertdialogclaude.js

@@ -2,7 +2,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
-import { cn } from '@myrjfa/state';
+import { cn } from "@myrjfa/state/dist/lib/utils";
 import { Forward, Save, X } from 'lucide-react';
 import { useEffect, useState } from 'react';
 import { createRoot } from 'react-dom/client';

package/dist/misc/avatar.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as AvatarPrimitive from "@radix-ui/react-avatar";
-import { cn } from "@myrjfa/state";
+import { cn } from "@myrjfa/state/dist/lib/utils";
 function Avatar({ className, ...props }) {
     return (_jsx(AvatarPrimitive.Root, { "data-slot": "avatar", className: cn("relative flex size-8 shrink-0 overflow-hidden rounded-full", className), ...props }));
 }

package/dist/misc/badge.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Slot } from "@radix-ui/react-slot";
-import { cn } from "@myrjfa/state";
+import { cn } from "@myrjfa/state/dist/lib/utils";
 import { cva } from "class-variance-authority";
 const badgeVariants = cva("inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden", {
     variants: {

package/dist/misc/button.d.ts

@@ -1,10 +1,13 @@
 import { type VariantProps } from "class-variance-authority";
 declare const buttonVariants: (props?: ({
-    variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
+    variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | null | undefined;
     size?: "default" | "sm" | "lg" | "icon" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-declare function Button({ className, variant, size, asChild, ...props }: React.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
+type ButtonProps = React.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
     asChild?: boolean;
-}): import("react/jsx-runtime").JSX.Element;
+    loading?: boolean;
+    autoLoading?: boolean;
+};
+declare function Button({ className, variant, size, asChild, loading, autoLoading, disabled, onClick, children, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
 export { Button, buttonVariants };
 //# sourceMappingURL=button.d.ts.map

package/dist/misc/button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/misc/button.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAGjE,QAAA,MAAM,cAAc;;;mFA4BnB,CAAA;AAED,iBAAS,MAAM,CAAC,EACd,SAAS,EACT,OAAO,EACP,IAAI,EACJ,OAAe,EACf,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,GAC/B,YAAY,CAAC,OAAO,cAAc,CAAC,GAAG;IACpC,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,2CAUF;AAED,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,CAAA"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/misc/button.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAIlE,QAAA,MAAM,cAAc;;;mFA4BnB,CAAC;AAEF,KAAK,WAAW,GAAG,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,GAC/C,YAAY,CAAC,OAAO,cAAc,CAAC,GAAG;IACpC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAEJ,iBAAS,MAAM,CAAC,EACd,SAAS,EACT,OAAO,EACP,IAAI,EACJ,OAAe,EACf,OAAO,EACP,WAAkB,EAClB,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,WAAW,2CAkDb;AAED,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,CAAC"}

package/dist/misc/button.js

@@ -1,7 +1,10 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Slot } from "@radix-ui/react-slot";
-import { cn } from "@myrjfa/state";
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Slot, Slottable } from "@radix-ui/react-slot";
+import { cn } from "@myrjfa/state/dist/lib/utils";
 import { cva } from "class-variance-authority";
+import { Loader2 } from "lucide-react";
+import { useState } from "react";
 const buttonVariants = cva("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-[color,box-shadow] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", {
     variants: {
         variant: {
@@ -24,8 +27,33 @@ const buttonVariants = cva("inline-flex items-center justify-center gap-2 whites
         size: "default",
     },
 });
-function Button({ className, variant, size, asChild = false, ...props }) {
+function Button({ className, variant, size, asChild = false, loading, autoLoading = true, disabled, onClick, children, ...props }) {
     const Comp = asChild ? Slot : "button";
-    return (_jsx(Comp, { className: `cursor-pointer ${cn(buttonVariants({ variant, size, className }))}`, ...props }, "button"));
+    const [internalLoading, setInternalLoading] = useState(false);
+    const isLoading = Boolean(loading || internalLoading);
+    const isDisabled = Boolean(disabled || isLoading);
+    const handleClick = async (event) => {
+        if (isDisabled) {
+            event.preventDefault();
+            return;
+        }
+        const result = onClick === null || onClick === void 0 ? void 0 : onClick(event);
+        const shouldAutoLoad = autoLoading && !event.defaultPrevented && (Boolean(onClick) || asChild);
+        if (!shouldAutoLoad) {
+            return;
+        }
+        setInternalLoading(true);
+        if (result && typeof result.then === "function") {
+            try {
+                await result;
+            }
+            finally {
+                setInternalLoading(false);
+            }
+            return;
+        }
+        window.setTimeout(() => setInternalLoading(false), 400);
+    };
+    return (_jsxs(Comp, { className: cn("cursor-pointer", asChild && isDisabled && "pointer-events-none opacity-50", buttonVariants({ variant, size, className })), disabled: !asChild ? isDisabled : undefined, "aria-disabled": asChild && isDisabled ? true : undefined, "aria-busy": isLoading || undefined, "data-loading": isLoading || undefined, onClick: handleClick, ...props, children: [isLoading ? _jsx(Loader2, { className: "animate-spin" }) : null, _jsx(Slottable, { children: children })] }, "button"));
 }
 export { Button, buttonVariants };

package/dist/misc/card.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cn } from "@myrjfa/state";
+import { cn } from "@myrjfa/state/dist/lib/utils";
 function Card({ className, ...props }) {
     return (_jsx("div", { className: cn("bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm", className), ...props }, "card"));
 }

package/dist/misc/carousel.d.ts

@@ -14,7 +14,7 @@ type CarouselProps = {
 declare function Carousel({ orientation, opts, setApi, plugins, className, children, ...props }: React.ComponentProps<"div"> & CarouselProps): import("react/jsx-runtime").JSX.Element;
 declare function CarouselContent({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
 declare function CarouselItem({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
-declare function CarouselPrevious({ className, variant, size, ...props }: React.ComponentProps<typeof Button>): import("react/jsx-runtime").JSX.Element;
-declare function CarouselNext({ className, variant, size, ...props }: React.ComponentProps<typeof Button>): import("react/jsx-runtime").JSX.Element;
+declare function CarouselPrevious({ className, variant, size, onClick, ...props }: React.ComponentProps<typeof Button>): import("react/jsx-runtime").JSX.Element;
+declare function CarouselNext({ className, variant, size, onClick, ...props }: React.ComponentProps<typeof Button>): import("react/jsx-runtime").JSX.Element;
 export { type CarouselApi, Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext, };
 //# sourceMappingURL=carousel.d.ts.map

package/dist/misc/carousel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"carousel.d.ts","sourceRoot":"","sources":["../../src/misc/carousel.tsx"],"names":[],"mappings":"AAGA,OAAO,gBAAgB,EAAE,EACvB,KAAK,oBAAoB,EAC1B,MAAM,sBAAsB,CAAA;AAE7B,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AAEjC,KAAK,WAAW,GAAG,oBAAoB,CAAC,CAAC,CAAC,CAAA;AAC1C,KAAK,qBAAqB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAA;AAChE,KAAK,eAAe,GAAG,qBAAqB,CAAC,CAAC,CAAC,CAAA;AAC/C,KAAK,cAAc,GAAG,qBAAqB,CAAC,CAAC,CAAC,CAAA;AAE9C,KAAK,aAAa,GAAG;IACnB,IAAI,CAAC,EAAE,eAAe,CAAA;IACtB,OAAO,CAAC,EAAE,cAAc,CAAA;IACxB,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAA;IACvC,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,WAAW,KAAK,IAAI,CAAA;CACpC,CAAA;AAuBD,iBAAS,QAAQ,CAAC,EAChB,WAA0B,EAC1B,IAAI,EACJ,MAAM,EACN,OAAO,EACP,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG,aAAa,2CAgF7C;AAED,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAmB5E;AAED,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAgBzE;AAED,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,OAAmB,EACnB,IAAa,EACb,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,2CAuBrC;AAED,iBAAS,YAAY,CAAC,EACpB,SAAS,EACT,OAAmB,EACnB,IAAa,EACb,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,2CAuBrC;AAED,OAAO,EACL,KAAK,WAAW,EAChB,QAAQ,EACR,eAAe,EACf,YAAY,EACZ,gBAAgB,EAChB,YAAY,GACb,CAAA"}
+{"version":3,"file":"carousel.d.ts","sourceRoot":"","sources":["../../src/misc/carousel.tsx"],"names":[],"mappings":"AAGA,OAAO,gBAAgB,EAAE,EACvB,KAAK,oBAAoB,EAC1B,MAAM,sBAAsB,CAAA;AAE7B,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AAEjC,KAAK,WAAW,GAAG,oBAAoB,CAAC,CAAC,CAAC,CAAA;AAC1C,KAAK,qBAAqB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAA;AAChE,KAAK,eAAe,GAAG,qBAAqB,CAAC,CAAC,CAAC,CAAA;AAC/C,KAAK,cAAc,GAAG,qBAAqB,CAAC,CAAC,CAAC,CAAA;AAE9C,KAAK,aAAa,GAAG;IACnB,IAAI,CAAC,EAAE,eAAe,CAAA;IACtB,OAAO,CAAC,EAAE,cAAc,CAAA;IACxB,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAA;IACvC,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,WAAW,KAAK,IAAI,CAAA;CACpC,CAAA;AAuBD,iBAAS,QAAQ,CAAC,EAChB,WAA0B,EAC1B,IAAI,EACJ,MAAM,EACN,OAAO,EACP,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG,aAAa,2CAgF7C;AAED,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAmB5E;AAED,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAgBzE;AAED,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,OAAmB,EACnB,IAAa,EACb,OAAO,EACP,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,2CA2BrC;AAED,iBAAS,YAAY,CAAC,EACpB,SAAS,EACT,OAAmB,EACnB,IAAa,EACb,OAAO,EACP,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,2CA2BrC;AAED,OAAO,EACL,KAAK,WAAW,EAChB,QAAQ,EACR,eAAe,EACf,YAAY,EACZ,gBAAgB,EAChB,YAAY,GACb,CAAA"}