@myrjfa/ui 2.0.1 → 2.1.1

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC;AAC7B,cAAc,0BAA0B,CAAC;AACzC,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,eAAe,EAAE,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACpG,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,mBAAmB,CAAC;AAClC,cAAc,eAAe,CAAC;AAC9B,cAAc,sBAAsB,CAAC;AACrC,cAAc,YAAY,CAAC;AAC3B,cAAc,qBAAqB,CAAC;AACpC,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC;AACjC,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,4BAA4B,CAAC;AAC3C,cAAc,yBAAyB,CAAC;AACxC,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAC9D,cAAc,kCAAkC,CAAC;AACjD,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AACrC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,mBAAmB,CAAC;AAClC,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,mBAAmB,CAAC;AAClC,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,sBAAsB,CAAC;AACrC,cAAc,oBAAoB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC;AAC7B,cAAc,0BAA0B,CAAC;AACzC,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,eAAe,EAAE,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACpG,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,mBAAmB,CAAC;AAClC,cAAc,eAAe,CAAC;AAC9B,cAAc,sBAAsB,CAAC;AACrC,cAAc,YAAY,CAAC;AAC3B,cAAc,qBAAqB,CAAC;AACpC,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC;AACjC,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,4BAA4B,CAAC;AAC3C,cAAc,yBAAyB,CAAC;AACxC,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAC9D,cAAc,kCAAkC,CAAC;AACjD,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AACrC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,mBAAmB,CAAC;AAClC,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,mBAAmB,CAAC;AAClC,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,sBAAsB,CAAC;AACrC,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AAGrC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,sBAAsB,CAAC;AACrC,cAAc,yBAAyB,CAAC;AACxC,cAAc,iBAAiB,CAAC"}

package/dist/index.js

@@ -1,5 +1,5 @@
-// Export all your shared UI components
 export * from './misc/button';
+export * from './misc/empty-state';
 export * from './misc/accordion';
 export * from './misc/alert';
 export * from './misc/alertdialogclaude';
@@ -57,3 +57,9 @@ export * from './main/footer';
 export * from './main/navbar';
 export * from './main/paginationBar';
 export * from './main/review-page';
+export * from './misc/image-cropper';
+// New components — features #9, #10, #21, #26
+export * from './misc/pwa-install-button';
+export * from './misc/whatsapp-help';
+export * from './misc/image-compressor';
+export * from './misc/skeleton';

package/dist/main/navbar.js

@@ -2,11 +2,11 @@
 import { jsx as _jsx, jsxs as _jsxs } 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";
-import { isLoggedInAtom, userAtom, userLoadingAtom } from "@myrjfa/state";
-import { opportunityTypeOptions } from "@myrjfa/state";
+import { logoutUser } from "@myrjfa/state/dist/lib/actions/auth";
+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, MessageCircle, Compass, Mountain, Users, Sparkles, BedDouble, Ticket, Car } from "lucide-react";
+import { ChevronDown, Globe, Heart, LayoutDashboardIcon, Store, Target, Luggage, Compass, Mountain, Users, Sparkles, BedDouble, Ticket, Car } from "lucide-react";
 import Link from "next/link";
 import { useRouter, usePathname } from "next/navigation";
 import { useEffect, useState } from "react";
@@ -66,7 +66,7 @@ export function Navbar({ dark = false }) {
     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))) }) })] }), _jsx(NavItem, { icon: _jsx(Luggage, { className: "h-5 w-5" }), label: "Packages", href: "/packages", className: navItemColor }), _jsx(NavItem, { icon: _jsx(Globe, { className: "h-5 w-5" }), label: "Blogs", href: "/blogs", className: navItemColor }), _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: "Travel" }), _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: "/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: "Concerts, workshops & more" })] })] }), _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: "Tours & thrilling activities" })] })] }), _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 & vehicles" })] })] }), _jsx("p", { className: "text-[10px] font-black uppercase tracking-widest text-gray-400 px-3 pt-2 pb-0.5", children: "For You" }), _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" })] })] }), _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" })] })] })] }) })] }), isLoggedIn && _jsx(NavItem, { icon: _jsx(MessageCircle, { className: "h-5 w-5" }), label: "Chat", href: "/chat", className: navItemColor, external: true }), currentUser ? _jsx(NavItem, { icon: _jsx(Store, { className: "h-5 w-5" }), label: "Become a Partner", href: "/contact", className: navItemColor })
+    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))) }) })] }), _jsx(NavItem, { icon: _jsx(Luggage, { className: "h-5 w-5" }), label: "Packages", href: "/packages", className: navItemColor }), _jsx(NavItem, { icon: _jsx(Globe, { className: "h-5 w-5" }), label: "Blogs", href: "/blogs", className: navItemColor }), _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: "Travel" }), _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: "/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: "Concerts, workshops & more" })] })] }), _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: "Tours & thrilling activities" })] })] }), _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 & vehicles" })] })] }), _jsx("p", { className: "text-[10px] font-black uppercase tracking-widest text-gray-400 px-3 pt-2 pb-0.5", children: "For You" }), _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" })] })] }), _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" })] })] })] }) })] }), 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 })] }), _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) &&

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

@@ -1,4 +1,4 @@
-import { Review, reviewTargetType } from "@myrjfa/state";
+import { Review, reviewTargetType } from "@myrjfa/state/dist/lib/models/review";
 interface ReviewPageProps {
     title?: string;
     subtitle?: string;

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,eAAe,CAAC;AAoDxF,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,2CAsNjB"}
+{"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"}

package/dist/main/review-page.js

@@ -1,10 +1,10 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { addReview, deleteReview, editReview, getReviewsById } from "@myrjfa/state";
-import { reviewBasicSchema } from "@myrjfa/state";
-import { userAtom, userLoadingAtom } from "@myrjfa/state";
-import { formatDate } from "@myrjfa/state";
+import { addReview, deleteReview, editReview, getReviewsById } from "@myrjfa/state/dist/lib/actions/actions";
+import { reviewBasicSchema } from "@myrjfa/state/dist/lib/models/review";
+import { userAtom, userLoadingAtom } from "@myrjfa/state/dist/lib/userAtom";
+import { formatDate } from "@myrjfa/state/dist/lib/utils";
 import { useAtomValue } from "jotai";
 import { StarIcon } from "lucide-react";
 import { useEffect, useState } from "react";
@@ -23,13 +23,17 @@ export function ReviewPage({ title, subtitle, targetId, targetType = "opportunit
     var _a;
     const user = useAtomValue(userAtom);
     const loading = useAtomValue(userLoadingAtom);
-    const [review, setReview] = useState((_a = initialReviews.find((r) => r.reviewerUsername === (user === null || user === void 0 ? void 0 : user.username))) !== null && _a !== void 0 ? _a : null);
+    const [review, setReview] = useState(Array.isArray(initialReviews) ? ((_a = initialReviews.find((r) => r.reviewerUsername === (user === null || user === void 0 ? void 0 : user.username))) !== null && _a !== void 0 ? _a : null) : null);
     const [reviews, setReviews] = useState(initialReviews);
     const [displayReviews, setDisplayReviews] = useState([]);
+    const [page, setPage] = useState(1);
+    const [hasMore, setHasMore] = useState(false);
+    const [totalCount, setTotalCount] = useState(Array.isArray(initialReviews) ? initialReviews.length : 0);
     const [hoveredRating, setHoveredRating] = useState(null);
     const [isSubmitting, setIsSubmitting] = useState(false);
     const [isDeleting, setIsDeleting] = useState(false);
     const [isFormInitialized, setIsFormInitialized] = useState(false);
+    const [isLoadingMore, setIsLoadingMore] = useState(false);
     const form = useForm({
         resolver: zodResolver(reviewBasicSchema),
         defaultValues: {
@@ -42,17 +46,25 @@ export function ReviewPage({ title, subtitle, targetId, targetType = "opportunit
         if (loading)
             return;
         const fetchData = async () => {
-            const response = await getReviewsById(targetId, targetType);
+            // Cast to any to bypass stale type definitions in @myrjfa/state/dist
+            const response = await getReviewsById(targetId, targetType, { page: 1, limit: 10 });
             if (response === null || response === void 0 ? void 0 : response.error) {
                 console.error("Error: " + response.error);
             }
-            else {
+            else if (Array.isArray(response.reviews)) {
                 setReviews(response.reviews);
+                setTotalCount(response.totalCount);
+                setHasMore(response.hasMore);
+                setPage(1);
                 const myReview = response.reviews.find((r) => r.reviewerUsername === (user === null || user === void 0 ? void 0 : user.username));
                 setReview(myReview !== null && myReview !== void 0 ? myReview : null);
                 form.reset({ rating: reviewCategory === "comment" ? 1 : ((myReview === null || myReview === void 0 ? void 0 : myReview.rating) || 0), comment: (myReview === null || myReview === void 0 ? void 0 : myReview.comment) || "" });
                 setIsFormInitialized(true);
             }
+            else {
+                setReviews([]);
+                setIsFormInitialized(true);
+            }
         };
         if (!initialReviews || initialReviews.length === 0) {
             fetchData();
@@ -61,6 +73,27 @@ export function ReviewPage({ title, subtitle, targetId, targetType = "opportunit
             setIsFormInitialized(true); // Initialize immediately if already present
         }
     }, [targetId, targetType, user, loading]);
+    const handleLoadMore = async () => {
+        if (isLoadingMore || !hasMore)
+            return;
+        setIsLoadingMore(true);
+        try {
+            const nextPage = page + 1;
+            // Cast to any to bypass stale type definitions in @myrjfa/state/dist
+            const response = await getReviewsById(targetId, targetType, { page: nextPage, limit: 10 });
+            if (response === null || response === void 0 ? void 0 : response.error) {
+                console.error("Error: " + response.error);
+            }
+            else if (Array.isArray(response.reviews)) {
+                setReviews([...reviews, ...response.reviews]);
+                setPage(nextPage);
+                setHasMore(response.hasMore);
+            }
+        }
+        finally {
+            setIsLoadingMore(false);
+        }
+    };
     useEffect(() => {
         if (review) {
             form.reset({
@@ -71,7 +104,12 @@ export function ReviewPage({ title, subtitle, targetId, targetType = "opportunit
         setIsFormInitialized(true);
     }, [review]);
     useEffect(() => {
-        setDisplayReviews(reviews.filter((r) => r.comment));
+        if (Array.isArray(reviews)) {
+            setDisplayReviews(reviews.filter((r) => r.comment));
+        }
+        else {
+            setDisplayReviews([]);
+        }
     }, [reviews]);
     const onSubmit = async (data) => {
         setIsSubmitting(true);
@@ -91,6 +129,7 @@ export function ReviewPage({ title, subtitle, targetId, targetType = "opportunit
                 if (newReview) {
                     setReviews([newReview, ...reviews.filter((r) => r._id !== newReview._id)]);
                     setReview(newReview);
+                    setTotalCount(prev => review ? prev : prev + 1);
                     form.reset({ rating: reviewCategory === "comment" ? 1 : newReview.rating, comment: newReview.comment || "" });
                 }
             }
@@ -121,6 +160,7 @@ export function ReviewPage({ title, subtitle, targetId, targetType = "opportunit
             else {
                 setReviews(reviews.filter((r) => r._id !== review._id));
                 setReview(null);
+                setTotalCount(prev => Math.max(0, prev - 1));
                 form.reset({ rating: reviewCategory === "comment" ? 1 : 0, comment: "" });
             }
         }
@@ -135,5 +175,5 @@ export function ReviewPage({ title, subtitle, targetId, targetType = "opportunit
     if (loading || !isFormInitialized)
         return _jsx(Card, { className: "w-full h-50 flex items-center justify-center", children: "Loading Reviews..." });
     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", " (", 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))) })] })) : (_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, {})] })) }), 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." }) })] }));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"alertdialogclaude.d.ts","sourceRoot":"","sources":["../../src/misc/alertdialogclaude.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAE3D,UAAU,gBAAgB;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,CAAC;IAC9B,MAAM,EAAE,OAAO,CAAC;IAChB,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CACzC;AAED,eAAO,MAAM,aAAa,GAAI,QAAQ,GAAG,KAapC,YAAY,EAAE,CAAC;AAEpB,eAAO,MAAM,cAAc,GAAI,QAAQ,GAAG,KAarC,YAAY,EAAE,CAAC;AAEpB,wBAAgB,SAAS,CACrB,OAAO,EAAE,MAAM,EACf,KAAK,CAAC,EAAE,MAAM,EACd,OAAO,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,GAC9B,OAAO,CAAC,IAAI,CAAC,CAiCf;AAED,wBAAgB,WAAW,CAAC,EACxB,OAAO,EACP,KAAK,EACL,OAAY,EACZ,MAAM,EACN,YAAY,GACf,EAAE,gBAAgB,2CA0DlB;AAyBD,wBAAgB,eAAe,4CA2I9B"}
+{"version":3,"file":"alertdialogclaude.d.ts","sourceRoot":"","sources":["../../src/misc/alertdialogclaude.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAE3D,UAAU,gBAAgB;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,CAAC;IAC9B,MAAM,EAAE,OAAO,CAAC;IAChB,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CACzC;AAED,eAAO,MAAM,aAAa,GAAI,QAAQ,GAAG,KAapC,YAAY,EAAE,CAAC;AAEpB,eAAO,MAAM,cAAc,GAAI,QAAQ,GAAG,KAarC,YAAY,EAAE,CAAC;AAEpB,wBAAgB,SAAS,CACrB,OAAO,EAAE,MAAM,EACf,KAAK,CAAC,EAAE,MAAM,EACd,OAAO,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,GAC9B,OAAO,CAAC,IAAI,CAAC,CAiCf;AAED,wBAAgB,WAAW,CAAC,EACxB,OAAO,EACP,KAAK,EACL,OAAY,EACZ,MAAM,EACN,YAAY,GACf,EAAE,gBAAgB,2CA8DlB;AAyBD,wBAAgB,eAAe,4CA2I9B"}

package/dist/misc/alertdialogclaude.js

@@ -59,7 +59,7 @@ export function showAlert(message, title, actions) {
     });
 }
 export function AlertDialog({ message, title, actions = [], isOpen, onOpenChange, }) {
-    return (_jsx(AlertDialogPrimitive.Root, { open: isOpen, onOpenChange: onOpenChange, children: _jsxs(AlertDialogPrimitive.Portal, { children: [_jsx(AlertDialogPrimitive.Overlay, { className: "fixed inset-0 z-50 bg-black/50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0" }), _jsxs(AlertDialogPrimitive.Content, { className: "fixed left-1/2 top-1/2 z-50 max-h-[85vh] w-full max-w-md -translate-x-1/2 -translate-y-1/2 rounded-lg border border-neutral-200 bg-white p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-top-[2%] data-[state=open]:slide-in-from-top-[2%] dark:border-neutral-800 dark:bg-neutral-950 sm:rounded-lg md:w-full", children: [_jsxs("div", { className: "flex flex-col space-y-2", children: [title && (_jsxs("div", { className: "flex items-center justify-between", children: [_jsx(AlertDialogPrimitive.Title, { className: "text-lg font-semibold text-neutral-900 dark:text-neutral-50 flex-grow text-center", children: title }), _jsx(Button, { variant: "ghost", onClick: () => onOpenChange(false), children: _jsx(X, {}) })] })), _jsx(AlertDialogPrimitive.Description, { className: "text-sm text-neutral-700 dark:text-neutral-300 text-center", children: message })] }), _jsx("div", { className: cn("mt-6 flex flex-col-reverse gap-2 sm:flex-row", actions.length > 0 ? "sm:justify-end" : "justify-center"), children: actions.length > 0 ? (actions.map((action, index) => (_jsx(AlertDialogButton, { variant: action.variant || 'default', onClick: () => {
+    return (_jsx(AlertDialogPrimitive.Root, { open: isOpen, onOpenChange: onOpenChange, children: _jsxs(AlertDialogPrimitive.Portal, { children: [_jsx(AlertDialogPrimitive.Overlay, { className: "fixed inset-0 z-50 bg-black/50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0" }), _jsxs(AlertDialogPrimitive.Content, { className: "fixed left-1/2 top-1/2 z-50 max-h-[85vh] w-full max-w-md -translate-x-1/2 -translate-y-1/2 rounded-lg border border-neutral-200 bg-white p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-top-[2%] data-[state=open]:slide-in-from-top-[2%] dark:border-neutral-800 dark:bg-neutral-950 sm:rounded-lg md:w-full", children: [_jsxs("div", { className: "flex flex-col space-y-2", children: [title ? (_jsxs("div", { className: "flex items-center justify-between", children: [_jsx(AlertDialogPrimitive.Title, { className: "text-lg font-semibold text-neutral-900 dark:text-neutral-50 flex-grow text-center", children: title }), _jsx(Button, { variant: "ghost", onClick: () => onOpenChange(false), children: _jsx(X, {}) })] })) : (_jsx(AlertDialogPrimitive.Title, { className: "sr-only", children: "Alert" })), _jsx(AlertDialogPrimitive.Description, { className: "text-sm text-neutral-700 dark:text-neutral-300 text-center", children: message })] }), _jsx("div", { className: cn("mt-6 flex flex-col-reverse gap-2 sm:flex-row", actions.length > 0 ? "sm:justify-end" : "justify-center"), children: actions.length > 0 ? (actions.map((action, index) => (_jsx(AlertDialogButton, { variant: action.variant || 'default', onClick: () => {
                                     action.action();
                                     onOpenChange(false);
                                 }, children: action.label }, index)))) : (_jsx(AlertDialogButton, { onClick: () => onOpenChange(false), children: "OK" })) })] })] }) }));

package/dist/misc/command.js

@@ -14,7 +14,7 @@ function CommandInput({ className, ...props }) {
     return (_jsxs("div", { "data-slot": "command-input-wrapper", className: "flex h-9 items-center gap-2 border-b px-3", children: [_jsx(SearchIcon, { className: "size-4 shrink-0 opacity-50" }), _jsx(CommandPrimitive.Input, { "data-slot": "command-input", className: cn("placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50", className), ...props })] }));
 }
 function CommandList({ className, ...props }) {
-    return (_jsx(CommandPrimitive.List, { "data-slot": "command-list", className: cn("max-h-[250px] scroll-py-1 overflow-x-hidden overflow-y-auto", className), ...props }));
+    return (_jsx(CommandPrimitive.List, { "data-slot": "command-list", className: cn("max-h-[350px] scroll-py-1 overflow-x-hidden overflow-y-auto touch-pan-y z-[300]", className), ...props }));
 }
 function CommandEmpty({ ...props }) {
     return (_jsx(CommandPrimitive.Empty, { "data-slot": "command-empty", className: "py-6 text-center text-sm", ...props }));

package/dist/misc/dashboard/action-buttons.js

@@ -0,0 +1,31 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ActionButtons = ActionButtons;
+const lucide_react_1 = require("lucide-react");
+const react_1 = __importDefault(require("react"));
+const button_1 = require("../misc/button");
+const dropdown_menu_1 = require("../misc/dropdown-menu");
+function ActionButtons({ actions, includeMoreMenu = true, maxDisplayed = 0 }) {
+    const displayedActions = actions.slice(0, maxDisplayed);
+    const menuActions = includeMoreMenu ? actions.slice(maxDisplayed) : [];
+    return (react_1.default.createElement("div", { className: "flex items-center gap-2" },
+        displayedActions.map((action, index) => (react_1.default.createElement(button_1.Button, { key: index, variant: action.variant || 'outline', size: "sm", onClick: (e) => {
+                e.stopPropagation();
+                action.action();
+            }, className: 'cursor-pointer' },
+            action.icon,
+            react_1.default.createElement("span", { className: "ml-1" }, action.label)))),
+        menuActions.length > 0 && (react_1.default.createElement(dropdown_menu_1.DropdownMenu, null,
+            react_1.default.createElement(dropdown_menu_1.DropdownMenuTrigger, { asChild: true },
+                react_1.default.createElement(button_1.Button, { variant: "outline", size: "sm" },
+                    react_1.default.createElement(lucide_react_1.MoreHorizontal, { className: "h-4 w-4 cursor-pointer" }))),
+            react_1.default.createElement(dropdown_menu_1.DropdownMenuContent, { align: "end" }, menuActions.map((action, index) => (react_1.default.createElement(dropdown_menu_1.DropdownMenuItem, { key: index, onClick: (e) => {
+                    e.stopPropagation();
+                    action.action();
+                } },
+                action.icon,
+                react_1.default.createElement("span", { className: "ml-2" }, action.label)))))))));
+}

package/dist/misc/document-upload-button.d.ts

@@ -0,0 +1,12 @@
+type UploadType = "image" | "document" | "both";
+interface FileUploadProps {
+    label?: string;
+    required?: boolean;
+    type?: UploadType;
+    value?: File | null;
+    onChange: (file: File | null) => void;
+    className?: string;
+}
+export declare function FileUpload({ label, required, type, value, onChange, className, }: FileUploadProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=document-upload-button.d.ts.map

package/dist/misc/document-upload-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"document-upload-button.d.ts","sourceRoot":"","sources":["../../src/misc/document-upload-button.tsx"],"names":[],"mappings":"AAMA,KAAK,UAAU,GAAG,OAAO,GAAG,UAAU,GAAG,MAAM,CAAC;AAEhD,UAAU,eAAe;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACpB,QAAQ,EAAE,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,CAAC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,wBAAgB,UAAU,CAAC,EACvB,KAAqB,EACrB,QAAQ,EACR,IAAa,EACb,KAAK,EACL,QAAQ,EACR,SAAS,GACZ,EAAE,eAAe,2CAmEjB"}

package/dist/misc/document-upload-button.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
+import { cn } from "@myrjfa/state/dist/lib/utils";
+import { FileUp, ImageIcon, FileText } from "lucide-react";
+import { Input } from "./input";
+import { Label } from "./label";
+export function FileUpload({ label = "Upload File", required, type = "both", value, onChange, className, }) {
+    const inputRef = useRef(null);
+    const acceptMap = {
+        image: "image/*",
+        document: "application/pdf",
+        both: "application/pdf,image/*",
+    };
+    const helperTextMap = {
+        image: "Image only",
+        document: "PDF only",
+        both: "PDF or image",
+    };
+    const Icon = type === "image"
+        ? ImageIcon
+        : type === "document"
+            ? FileText
+            : FileUp;
+    return (_jsxs("div", { className: cn("w-full", className), children: [_jsxs(Label, { className: "text-sm font-medium", children: [label, " ", required && _jsx("span", { className: "text-destructive", children: "*" }), _jsxs("span", { className: "text-xs text-muted-foreground ml-2", children: ["(", helperTextMap[type], ")"] })] }), _jsxs("div", { onClick: () => { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, className: cn("mt-2 border-2 border-dashed rounded-lg cursor-pointer transition-all", "flex flex-col items-center justify-center text-center", "hover:border-primary/50", 
+                // 📱 Responsive sizing
+                "p-3"), children: [_jsx(Icon, { className: "w-5 h-5 sm:w-6 sm:h-6 text-muted-foreground mb-1" }), value ? (_jsx("p", { className: "text-xs sm:text-sm text-primary font-medium break-all", children: value.name })) : (_jsx("p", { className: "text-xs sm:text-sm text-muted-foreground", children: "Tap or click to upload" })), _jsx(Input, { ref: inputRef, type: "file", accept: acceptMap[type], className: "hidden", onChange: (e) => { var _a, _b; return onChange((_b = (_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : null); } })] })] }));
+}

package/dist/misc/empty-state.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+interface EmptyStateProps {
+    title?: string;
+    description?: string;
+    icon?: React.ReactNode;
+    action?: React.ReactNode;
+}
+export declare function EmptyState({ title, description, icon, action, }: EmptyStateProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=empty-state.d.ts.map

package/dist/misc/empty-state.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"empty-state.d.ts","sourceRoot":"","sources":["../../src/misc/empty-state.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,UAAU,eAAe;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,wBAAgB,UAAU,CAAC,EACvB,KAA0B,EAC1B,WAAW,EACX,IAAI,EACJ,MAAM,GACT,EAAE,eAAe,2CAajB"}

package/dist/misc/empty-state.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Inbox } from 'lucide-react';
+export function EmptyState({ title = 'Nothing here yet', description, icon, action, }) {
+    return (_jsxs("div", { className: "flex flex-col items-center justify-center py-16 px-4 text-center gap-3", children: [_jsx("div", { className: "text-muted-foreground", children: icon !== null && icon !== void 0 ? icon : _jsx(Inbox, { className: "w-12 h-12 mx-auto mb-2 opacity-40" }) }), _jsx("h3", { className: "text-lg font-semibold text-foreground", children: title }), description && (_jsx("p", { className: "text-sm text-muted-foreground max-w-xs", children: description })), action && _jsx("div", { className: "mt-2", children: action })] }));
+}

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

@@ -1 +1 @@
-{"version":3,"file":"filter.d.ts","sourceRoot":"","sources":["../../src/misc/filter.tsx"],"names":[],"mappings":"AAsBA,KAAK,WAAW,GAAG;IACf,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,aAAa,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IACzC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACzC,MAAM,CAAC,EAAE,OAAO,CAAA;CACnB,CAAC;AACF,eAAO,MAAM,WAAW,GAAI,KAAK,MAAM,EAAE,aACwC,CAAC;AAElF,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAgHjC,CAAC;AAEF,OAAO,EAAE,MAAM,EAAE,CAAC"}
+{"version":3,"file":"filter.d.ts","sourceRoot":"","sources":["../../src/misc/filter.tsx"],"names":[],"mappings":"AAsBA,KAAK,WAAW,GAAG;IACf,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,aAAa,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IACzC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACzC,MAAM,CAAC,EAAE,OAAO,CAAA;CACnB,CAAC;AACF,eAAO,MAAM,WAAW,GAAI,KAAK,MAAM,EAAE,aACwC,CAAC;AAElF,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAqHjC,CAAC;AAEF,OAAO,EAAE,MAAM,EAAE,CAAC"}

package/dist/misc/filter.js

@@ -30,7 +30,7 @@ const Filter = ({ values, label, formType, selectedValue, onChange, others }) =>
     }, [open]);
     return (_jsx("div", { className: cn("filter-container", label), children: formType === "select" ? (_jsxs(Select, { value: selectedValue !== null && selectedValue !== void 0 ? selectedValue : "", onValueChange: (val) => onChange(val === "clear" ? null : val), children: [_jsx(SelectTrigger, { className: "w-full bg-transparent hover:bg-muted border-none shadow-none", children: !selectedValue || selectedValue === "clear" || selectedValue[0] == '0'
                         ? `Choose ${label.toLowerCase()}...`
-                        : selectedValue }), _jsxs(SelectContent, { className: "w-full z-201", children: [_jsx(SelectItem, { value: "clear", children: _jsx("em", { children: "Clear" }) }), data.map((option) => (_jsx(SelectItem, { value: option, children: option }, option)))] })] })) : (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, className: "w-full overflow-y-auto", children: _jsxs(Button, { ref: triggerRef, variant: "ghost", role: "combobox", className: "filter-box justify-between w-full", children: [selectedValue || `Select ${label.toLowerCase()}...`, _jsx(ChevronDown, { className: "ml-2 h-4 w-4 shrink-0 opacity-50" })] }) }), _jsxs(PopoverContent, { className: "p-0 w-full z-201", style: { width: `${popoverWidth}px` }, align: "start", children: [_jsxs(Command, { children: [_jsx(CommandInput, { placeholder: `Search ${label.toLowerCase()}...` }), _jsx(CommandEmpty, { children: "No results found." }), _jsx(CommandList, { children: data.map((option) => (_jsxs(CommandItem, { value: option, onSelect: () => {
+                        : selectedValue }), _jsxs(SelectContent, { className: "w-full z-[301]", children: [_jsx(SelectItem, { value: "clear", children: _jsx("em", { children: "Clear" }) }), data.map((option) => (_jsx(SelectItem, { value: option, children: option }, option)))] })] })) : (_jsxs(Popover, { open: open, onOpenChange: setOpen, modal: false, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { ref: triggerRef, variant: "ghost", role: "combobox", className: "filter-box justify-between w-full", children: [selectedValue || `Select ${label.toLowerCase()}...`, _jsx(ChevronDown, { className: "ml-2 h-4 w-4 shrink-0 opacity-50" })] }) }), _jsxs(PopoverContent, { className: "p-0 z-[310] pointer-events-auto overflow-hidden", style: { width: popoverWidth > 0 ? `${popoverWidth}px` : 'auto', minWidth: 'min(300px, 90vw)' }, align: "start", onWheel: (e) => e.stopPropagation(), children: [_jsxs(Command, { children: [_jsx(CommandInput, { placeholder: `Search ${label.toLowerCase()}...` }), _jsx(CommandEmpty, { children: "No results found." }), _jsx(CommandList, { children: data.map((option) => (_jsxs(CommandItem, { value: option, onSelect: () => {
                                             onChange(option);
                                             setOpen(false);
                                         }, children: [_jsx(Check, { className: cn("mr-2 h-4 w-4", selectedValue === option ? "opacity-100" : "opacity-0") }), option] }, option))) })] }), others &&

package/dist/misc/image-compressor.d.ts

@@ -0,0 +1,29 @@
+export interface CompressOptions {
+    quality?: number;
+    maxWidth?: number;
+    maxHeight?: number;
+}
+/**
+ * Compress an image File using Canvas API.
+ * Returns a new File object with the same name but compressed content.
+ */
+export declare function compressImage(file: File, options?: CompressOptions): Promise<File>;
+export interface ImageCompressorProps {
+    enableCompression?: boolean;
+    quality?: number;
+    maxWidth?: number;
+    maxHeight?: number;
+    accept?: string;
+    multiple?: boolean;
+    onChange: (files: File[]) => void;
+    children?: React.ReactNode;
+    className?: string;
+    id?: string;
+}
+/**
+ * #26 — Image Compressor Input Component
+ * Drop-in replacement for a file input that optionally compresses images
+ * before passing them to the onChange handler.
+ */
+export declare function ImageCompressorInput({ enableCompression, quality, maxWidth, maxHeight, accept, multiple, onChange, children, className, id, }: ImageCompressorProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=image-compressor.d.ts.map

package/dist/misc/image-compressor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-compressor.d.ts","sourceRoot":"","sources":["../../src/misc/image-compressor.tsx"],"names":[],"mappings":"AAIA,MAAM,WAAW,eAAe;IAC5B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;;GAGG;AACH,wBAAsB,aAAa,CAC/B,IAAI,EAAE,IAAI,EACV,OAAO,GAAE,eAAoB,GAC9B,OAAO,CAAC,IAAI,CAAC,CAkDf;AAED,MAAM,WAAW,oBAAoB;IACjC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IAClC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;;;GAIG;AACH,wBAAgB,oBAAoB,CAAC,EACjC,iBAAwB,EACxB,OAAa,EACb,QAAe,EACf,SAAgB,EAChB,MAAoD,EACpD,QAAgB,EAChB,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,EAAE,GACL,EAAE,oBAAoB,2CAmCtB"}

package/dist/misc/image-compressor.js

@@ -0,0 +1,70 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useCallback } from 'react';
+/**
+ * Compress an image File using Canvas API.
+ * Returns a new File object with the same name but compressed content.
+ */
+export async function compressImage(file, options = {}) {
+    const { quality = 0.8, maxWidth = 1920, maxHeight = 1920 } = options;
+    return new Promise((resolve, reject) => {
+        const img = new Image();
+        const url = URL.createObjectURL(file);
+        img.onload = () => {
+            URL.revokeObjectURL(url);
+            let { width, height } = img;
+            if (width > maxWidth) {
+                height = Math.round((height * maxWidth) / width);
+                width = maxWidth;
+            }
+            if (height > maxHeight) {
+                width = Math.round((width * maxHeight) / height);
+                height = maxHeight;
+            }
+            const canvas = document.createElement('canvas');
+            canvas.width = width;
+            canvas.height = height;
+            const ctx = canvas.getContext('2d');
+            if (!ctx) {
+                resolve(file); // fallback: return original
+                return;
+            }
+            ctx.drawImage(img, 0, 0, width, height);
+            canvas.toBlob((blob) => {
+                if (!blob) {
+                    resolve(file); // fallback
+                    return;
+                }
+                resolve(new File([blob], file.name, { type: 'image/webp', lastModified: Date.now() }));
+            }, 'image/webp', quality);
+        };
+        img.onerror = () => {
+            URL.revokeObjectURL(url);
+            reject(new Error(`Failed to load image: ${file.name}`));
+        };
+        img.src = url;
+    });
+}
+/**
+ * #26 — Image Compressor Input Component
+ * Drop-in replacement for a file input that optionally compresses images
+ * before passing them to the onChange handler.
+ */
+export function ImageCompressorInput({ enableCompression = true, quality = 0.8, maxWidth = 1920, maxHeight = 1920, accept = 'image/jpeg,image/jpg,image/png,image/webp', multiple = false, onChange, children, className, id, }) {
+    const inputRef = useRef(null);
+    const handleChange = useCallback(async (e) => {
+        const rawFiles = Array.from(e.target.files || []);
+        if (!rawFiles.length)
+            return;
+        if (!enableCompression) {
+            onChange(rawFiles);
+            return;
+        }
+        const compressed = await Promise.all(rawFiles.map(f => compressImage(f, { quality, maxWidth, maxHeight }).catch(() => f)));
+        onChange(compressed);
+        // Reset input so the same file can be re-selected
+        if (inputRef.current)
+            inputRef.current.value = '';
+    }, [enableCompression, quality, maxWidth, maxHeight, onChange]);
+    return (_jsxs("label", { className: className, style: { cursor: 'pointer' }, children: [children, _jsx("input", { ref: inputRef, id: id, type: "file", accept: accept, multiple: multiple, onChange: handleChange, style: { display: 'none' } })] }));
+}

package/dist/misc/image-cropper.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+interface ImageCropperProps {
+    image: string;
+    onCancel: () => void;
+    onCropComplete: (croppedImage: Blob) => void;
+    open: boolean;
+}
+declare const ImageCropper: React.FC<ImageCropperProps>;
+export default ImageCropper;
+//# sourceMappingURL=image-cropper.d.ts.map

package/dist/misc/image-cropper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-cropper.d.ts","sourceRoot":"","sources":["../../src/misc/image-cropper.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAgC,MAAM,OAAO,CAAC;AAMrD,UAAU,iBAAiB;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,cAAc,EAAE,CAAC,YAAY,EAAE,IAAI,KAAK,IAAI,CAAC;IAC7C,IAAI,EAAE,OAAO,CAAC;CACjB;AAED,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAgG7C,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/misc/image-cropper.js

@@ -0,0 +1,44 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useCallback } from "react";
+import Cropper from "react-easy-crop";
+import { Button } from "./button";
+import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "./dialog";
+import { Slider } from "./slider";
+const ImageCropper = ({ image, onCancel, onCropComplete, open }) => {
+    const [crop, setCrop] = useState({ x: 0, y: 0 });
+    const [zoom, setZoom] = useState(1);
+    const [croppedAreaPixels, setCroppedAreaPixels] = useState(null);
+    const onCropChange = (crop) => {
+        setCrop(crop);
+    };
+    const onZoomChange = (zoom) => {
+        setZoom(zoom);
+    };
+    const onCropCompleteCallback = useCallback((_, croppedAreaPixels) => {
+        setCroppedAreaPixels(croppedAreaPixels);
+    }, []);
+    const createCroppedImage = async () => {
+        if (!croppedAreaPixels || !image)
+            return;
+        const img = new Image();
+        img.src = image;
+        await new Promise((resolve) => {
+            img.onload = resolve;
+        });
+        const canvas = document.createElement("canvas");
+        const ctx = canvas.getContext("2d");
+        if (!ctx)
+            return;
+        canvas.width = croppedAreaPixels.width;
+        canvas.height = croppedAreaPixels.height;
+        ctx.drawImage(img, croppedAreaPixels.x, croppedAreaPixels.y, croppedAreaPixels.width, croppedAreaPixels.height, 0, 0, croppedAreaPixels.width, croppedAreaPixels.height);
+        canvas.toBlob((blob) => {
+            if (blob) {
+                onCropComplete(blob);
+            }
+        }, "image/jpeg");
+    };
+    return (_jsx(Dialog, { open: open, onOpenChange: (isOpen) => !isOpen && onCancel(), children: _jsxs(DialogContent, { className: "sm:max-w-[500px] z-[300]", children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: "Crop Profile Picture" }) }), _jsx("div", { className: "relative h-[300px] w-full bg-gray-100 rounded-md overflow-hidden", children: _jsx(Cropper, { image: image, crop: crop, zoom: zoom, aspect: 1, cropShape: "round", showGrid: false, onCropChange: onCropChange, onCropComplete: onCropCompleteCallback, onZoomChange: onZoomChange }) }), _jsx("div", { className: "py-4", children: _jsxs("div", { className: "flex items-center gap-4", children: [_jsx("span", { className: "text-sm font-medium", children: "Zoom" }), _jsx(Slider, { value: [zoom], min: 1, max: 5, step: 0.1, onValueChange: (values) => { var _a; return setZoom((_a = values[0]) !== null && _a !== void 0 ? _a : 1); }, className: "flex-1" })] }) }), _jsxs(DialogFooter, { className: "flex gap-2", children: [_jsx(Button, { variant: "outline", onClick: onCancel, children: "Cancel" }), _jsx(Button, { onClick: createCroppedImage, children: "Set Profile Picture" })] })] }) }));
+};
+export default ImageCropper;

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

@@ -1 +1 @@
-{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../src/misc/input.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,iBAAS,KAAK,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,2CAc1E;AAED,OAAO,EAAE,KAAK,EAAE,CAAA"}
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../src/misc/input.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,iBAAS,KAAK,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,2CAgB1E;AAED,OAAO,EAAE,KAAK,EAAE,CAAA"}

package/dist/misc/input.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from "@myrjfa/state";
 function Input({ className, type, ...props }) {
-    return (_jsx("input", { type: type, "data-slot": "input", className: cn("border-input file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", "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", className), ...props }));
+    return (_jsx("input", { type: type, "data-slot": "input", onWheel: (e) => e.currentTarget.blur(), className: cn("border-input file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", "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", "[&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none", className), ...props }));
 }
 export { Input };