@myrjfa/ui 0.3.1

package/dist/misc/pwa-install-button.js

@@ -0,0 +1,160 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import Image from 'next/image';
+/**
+ * #9 — Floating PWA Install Button
+ * Premium banner aligned with Trippeaze brand.
+ * - Only shows on mobile (beforeinstallprompt)
+ * - Auto-hides after 10 s
+ * - Animated entrance / exit
+ */
+export function PwaInstallButton() {
+    const [show, setShow] = useState(false);
+    const [hiding, setHiding] = useState(false);
+    const promptRef = useRef(null);
+    const timerRef = useRef(null);
+    const dismiss = () => {
+        setHiding(true);
+        setTimeout(() => setShow(false), 350);
+    };
+    useEffect(() => {
+        const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
+        if (!isMobile)
+            return;
+        const handler = (e) => {
+            e.preventDefault();
+            promptRef.current = e;
+            setShow(true);
+            setHiding(false);
+            if (timerRef.current)
+                clearTimeout(timerRef.current);
+            timerRef.current = setTimeout(dismiss, 10000);
+        };
+        window.addEventListener('beforeinstallprompt', handler);
+        return () => {
+            window.removeEventListener('beforeinstallprompt', handler);
+            if (timerRef.current)
+                clearTimeout(timerRef.current);
+        };
+    }, []);
+    const handleInstall = async () => {
+        if (!promptRef.current)
+            return;
+        if (timerRef.current)
+            clearTimeout(timerRef.current);
+        promptRef.current.prompt();
+        const { outcome } = await promptRef.current.userChoice;
+        if (outcome === 'accepted')
+            dismiss();
+    };
+    if (!show)
+        return null;
+    return (_jsxs(_Fragment, { children: [_jsx("style", { children: `
+                @keyframes tpz-slide-up {
+                    from { opacity: 0; transform: translateX(-50%) translateY(20px); }
+                    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
+                }
+                @keyframes tpz-slide-down {
+                    from { opacity: 1; transform: translateX(-50%) translateY(0); }
+                    to   { opacity: 0; transform: translateX(-50%) translateY(20px); }
+                }
+                @keyframes tpz-orbit {
+                    from { transform: rotate(0deg) translateX(22px) rotate(0deg); }
+                    to   { transform: rotate(360deg) translateX(22px) rotate(-360deg); }
+                }
+                @keyframes tpz-shimmer {
+                    0%   { background-position: -200% center; }
+                    100% { background-position: 200% center; }
+                }
+            ` }), _jsxs("div", { style: {
+                    position: 'fixed',
+                    bottom: '88px',
+                    left: '50%',
+                    transform: 'translateX(-50%)',
+                    zIndex: 9999,
+                    animation: hiding
+                        ? 'tpz-slide-down 0.35s cubic-bezier(.4,0,.2,1) forwards'
+                        : 'tpz-slide-up 0.4s cubic-bezier(.16,1,.3,1) forwards',
+                    // Prevent layout shift during animation
+                    willChange: 'transform, opacity',
+                }, children: [_jsx("div", { style: {
+                            position: 'absolute',
+                            inset: '-3px',
+                            borderRadius: '9999px',
+                            background: 'linear-gradient(135deg, #f97316, #fb923c, #22d3ee, #0891b2)',
+                            opacity: 0.3,
+                            filter: 'blur(8px)',
+                            zIndex: 0,
+                        } }), _jsxs("button", { onClick: handleInstall, style: {
+                            position: 'relative',
+                            zIndex: 1,
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: '10px',
+                            padding: '10px 18px 10px 12px',
+                            borderRadius: '9999px',
+                            border: '1px solid rgba(0,0,0,0.06)',
+                            background: 'linear-gradient(135deg, #ffffff 0%, #f8fafc 100%)',
+                            boxShadow: '0 12px 32px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.9)',
+                            cursor: 'pointer',
+                            whiteSpace: 'nowrap',
+                            backdropFilter: 'blur(8px)',
+                        }, children: [_jsx("div", { style: {
+                                    width: '36px',
+                                    height: '36px',
+                                    borderRadius: '50%',
+                                    overflow: 'hidden',
+                                    flexShrink: 0,
+                                    boxShadow: '0 2px 8px rgba(249,115,22,0.2)',
+                                }, children: _jsx(Image, { src: "/images/logoicon.webp", alt: "Trippeaze", width: 36, height: 36, style: { objectFit: 'cover' } }) }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: '1px' }, children: [_jsx("span", { style: {
+                                            fontSize: '11px',
+                                            fontWeight: 500,
+                                            letterSpacing: '0.08em',
+                                            textTransform: 'uppercase',
+                                            color: '#64748b',
+                                            lineHeight: 1,
+                                        }, children: "Get the app" }), _jsx("span", { style: {
+                                            fontSize: '15px',
+                                            fontWeight: 700,
+                                            letterSpacing: '-0.01em',
+                                            lineHeight: 1.2,
+                                            // Shimmer text using logo colors
+                                            background: 'linear-gradient(90deg, #fb923c, #fbbf24, #22d3ee, #fb923c)',
+                                            backgroundSize: '200% auto',
+                                            WebkitBackgroundClip: 'text',
+                                            WebkitTextFillColor: 'transparent',
+                                            backgroundClip: 'text',
+                                            animation: 'tpz-shimmer 3s linear infinite',
+                                        }, children: "Install Trippeaze" })] }), _jsx("div", { style: {
+                                    marginLeft: '4px',
+                                    width: '28px',
+                                    height: '28px',
+                                    borderRadius: '50%',
+                                    background: 'linear-gradient(135deg, #f97316, #dc2626)',
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    justifyContent: 'center',
+                                    flexShrink: 0,
+                                    boxShadow: '0 2px 8px rgba(249,115,22,0.5)',
+                                }, children: _jsx("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", children: _jsx("path", { d: "M7 2v7M4 6.5l3 3 3-3M2.5 11h9", stroke: "white", strokeWidth: "1.7", strokeLinecap: "round", strokeLinejoin: "round" }) }) })] }), _jsx("button", { onClick: (e) => { e.stopPropagation(); dismiss(); }, "aria-label": "Dismiss", style: {
+                            position: 'absolute',
+                            top: '-6px',
+                            right: '-6px',
+                            zIndex: 2,
+                            width: '20px',
+                            height: '20px',
+                            borderRadius: '50%',
+                            background: '#ffffff',
+                            border: '1px solid rgba(0,0,0,0.1)',
+                            color: '#64748b',
+                            fontSize: '11px',
+                            lineHeight: '20px',
+                            textAlign: 'center',
+                            cursor: 'pointer',
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            boxShadow: '0 2px 6px rgba(0,0,0,0.1)',
+                        }, children: "\u2715" })] })] }));
+}

package/dist/misc/rental-tile.d.ts

@@ -0,0 +1,6 @@
+import { TileProps } from "@myrjfa/state/dist/lib/models/tile";
+export declare function RentalTile(props: TileProps & {
+    onClick: () => void;
+    clicked: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=rental-tile.d.ts.map

package/dist/misc/rental-tile.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"rental-tile.d.ts","sourceRoot":"","sources":["../../src/misc/rental-tile.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,SAAS,EAAE,MAAM,oCAAoC,CAAC;AAK/D,wBAAgB,UAAU,CAAC,KAAK,EAAE,SAAS,GAAG;IAAE,OAAO,EAAE,MAAM,IAAI,CAAC;IAAC,OAAO,EAAE,OAAO,CAAA;CAAE,2CAuJtF"}

package/dist/misc/rental-tile.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { CheckCircle2, Settings, Users, Fuel, Star, MapPin, Gauge, Loader2 } from "lucide-react";
+import Image from "next/image";
+import { useRouter } from "next/navigation";
+import { cn } from "@myrjfa/state/dist/lib/utils";
+import { Card } from "./card";
+import { Button } from "./button";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./select";
+export function RentalTile(props) {
+    var _a;
+    const [selectedPickupIndex, setSelectedPickupIndex] = useState(0);
+    const router = useRouter();
+    const variants = ((_a = props.rentalVariants) === null || _a === void 0 ? void 0 : _a.length) ? props.rentalVariants : [props];
+    const selectedRental = variants[selectedPickupIndex] || variants[0] || props;
+    const [navigating, setNavigating] = useState(false);
+    const formatPrice = (p) => new Intl.NumberFormat('en-IN', { style: 'currency', currency: selectedRental.currency || 'INR', maximumFractionDigits: 0 }).format(p);
+    const titleStr = selectedRental.brand ? `${selectedRental.brand} ${selectedRental.model}` : selectedRental.title;
+    const totalPrice = selectedRental.price || 0;
+    const clicked = props.clicked || navigating;
+    const navigateToSelectedRental = () => {
+        var _a;
+        if (clicked)
+            return;
+        setNavigating(true);
+        router.push((_a = selectedRental.href) !== null && _a !== void 0 ? _a : `/rentals/${selectedRental.slug}`);
+    };
+    return (_jsxs(Card, { className: cn("h-full relative overflow-hidden flex flex-col bg-white border-0 shadow-sm ring-1 ring-slate-200/60 rounded-[24px] transition-all duration-500 hover:shadow-2xl hover:shadow-primary/10 hover:ring-primary/30 hover:-translate-y-1.5 group cursor-pointer", clicked && "opacity-60 pointer-events-none"), onClick: navigateToSelectedRental, children: [clicked && (_jsx("div", { className: "absolute inset-0 z-40 flex items-center justify-center rounded-[24px] bg-white/70 backdrop-blur-[1px]", children: _jsx(Loader2, { className: "h-7 w-7 animate-spin text-slate-700" }) })), _jsxs("div", { className: "absolute top-4 left-4 right-4 flex justify-between items-start z-20 pointer-events-none", children: [_jsx("div", { className: "flex flex-col gap-2", children: selectedRental.payAtPickup && (_jsxs("span", { className: "bg-emerald-500/90 text-white text-[10px] font-black uppercase tracking-wider px-3 py-1.5 rounded-full flex items-center gap-1.5 shadow-lg shadow-emerald-500/20 backdrop-blur-md", children: [_jsx(CheckCircle2, { className: "w-3 h-3" }), "Pay at Pickup"] })) }), _jsxs("div", { className: "flex flex-col items-end gap-2 pointer-events-auto", children: [(selectedRental.rating && selectedRental.rating > 0) ? (_jsxs("span", { className: "bg-white/95 text-slate-900 text-[11px] font-bold px-3 py-1.5 rounded-full shadow-lg flex items-center gap-1.5 border border-slate-100", children: [_jsx(Star, { className: "w-3.5 h-3.5 fill-amber-400 text-amber-400" }), _jsxs("span", { children: [selectedRental.rating, " ", _jsxs("span", { className: "font-semibold text-slate-400", children: ["(", selectedRental.reviewCount || 0, ")"] })] })] })) : null, (selectedRental.completedTrips && selectedRental.completedTrips > 0) ? (_jsxs("span", { className: "bg-slate-900/90 text-white text-[10px] font-bold px-3 py-1.5 rounded-full shadow-lg backdrop-blur-md", children: [selectedRental.completedTrips, " Trips"] })) : null] })] }), _jsxs("div", { className: "relative w-full aspect-[4/3] overflow-hidden", children: [_jsx("div", { className: "absolute inset-0 bg-slate-900/10 z-10 group-hover:bg-transparent transition-colors duration-500" }), _jsx(Image, { src: selectedRental.image || "/placeholder.jpg", alt: selectedRental.title, fill: true, sizes: "(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 25vw", className: "object-cover group-hover:scale-110 transition-transform duration-700 ease-out" }), _jsx("div", { className: "absolute bottom-0 left-0 right-0 h-1/2 bg-gradient-to-t from-white via-white/50 to-transparent z-10" })] }), _jsxs("div", { className: "flex-1 flex flex-col px-6 pb-6 -mt-10 relative z-20", children: [_jsxs("div", { className: "mb-5", children: [_jsx("h3", { className: "text-xl font-extrabold text-slate-900 tracking-tight leading-tight line-clamp-1 mb-1", title: titleStr, children: titleStr }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-[10px] font-black uppercase tracking-widest text-primary bg-primary/10 px-2 py-0.5 rounded", children: selectedRental.vehicleType || "Vehicle" }), _jsxs("span", { className: "text-xs font-bold text-slate-400", children: ["Model ", selectedRental.date ? new Date(selectedRental.date).getFullYear() : '2024'] })] })] }), _jsx("div", { className: "grid grid-cols-3 gap-3 mb-6", children: [
+                            { icon: _jsx(Settings, { className: "w-4 h-4" }), label: selectedRental.transmission || 'Auto' },
+                            { icon: _jsx(Users, { className: "w-4 h-4" }), label: `${selectedRental.seatingCapacity || 2} Seats` },
+                            { icon: _jsx(Fuel, { className: "w-4 h-4" }), label: selectedRental.fuelType || 'Petrol' }
+                        ].map((spec, i) => (_jsxs("div", { className: "flex flex-col items-center justify-center bg-slate-50 rounded-2xl p-3 border border-slate-100/50 group-hover:bg-white group-hover:border-primary/20 transition-all duration-300", children: [_jsx("div", { className: "text-slate-400 group-hover:text-primary transition-colors mb-1.5", children: spec.icon }), _jsx("span", { className: "text-[10px] font-bold text-slate-600 uppercase tracking-tight text-center", children: spec.label })] }, i))) }), _jsxs("div", { className: "relative mb-6", children: [_jsx("div", { className: "absolute -top-2 left-3 bg-white px-1.5 text-[10px] font-black uppercase tracking-widest text-slate-400 z-10 transition-colors group-hover:text-primary", children: "Available At" }), _jsx("div", { onClick: (event) => event.stopPropagation(), children: _jsxs(Select, { value: String(selectedPickupIndex), onValueChange: (value) => setSelectedPickupIndex(Number(value)), children: [_jsx(SelectTrigger, { className: "h-12 w-full rounded-2xl border-slate-100 bg-slate-50/50 px-4 text-sm font-bold text-slate-700 shadow-none group-hover:border-primary/20 focus:ring-0 focus-visible:ring-2 focus-visible:ring-slate-200", children: _jsx(SelectValue, { placeholder: selectedRental.location || "Location Not Set" }) }), _jsx(SelectContent, { align: "start", className: "z-[340] rounded-2xl border-slate-200 p-1 shadow-xl", children: variants.length > 0 ? (variants.map((variant, idx) => (_jsx(SelectItem, { value: String(idx), className: "rounded-xl px-3 py-2.5 font-semibold", children: _jsxs("span", { className: "inline-flex items-center gap-2", children: [_jsx(MapPin, { className: "h-4 w-4 text-slate-400" }), variant.location || "Location Not Set"] }) }, idx)))) : (_jsx(SelectItem, { value: "0", className: "rounded-xl px-3 py-2.5 font-semibold", children: selectedRental.location || "Location Not Set" })) })] }) })] }), _jsxs("div", { className: "mt-auto flex items-center justify-between gap-4 pt-1 border-t border-slate-100 pt-5", children: [_jsxs("div", { className: "flex flex-col", children: [_jsxs("div", { className: "flex items-baseline gap-1.5", children: [_jsx("span", { className: "text-3xl font-black text-slate-900 tracking-tighter", children: formatPrice(totalPrice) }), _jsx("span", { className: "text-xs font-bold text-slate-400 uppercase", children: "/day" })] }), _jsxs("div", { className: "flex items-center gap-1.5 mt-1", children: [_jsx(Gauge, { className: "w-3.5 h-3.5 text-primary" }), _jsx("span", { className: "text-[11px] font-bold text-slate-500", children: selectedRental.distanceLimit || 'No distance limit' })] })] }), _jsx(Button, { className: "rounded-2xl px-8 h-14 font-black uppercase tracking-widest text-xs shadow-xl shadow-primary/20 hover:shadow-primary/30 transition-all", onClick: (event) => { event.stopPropagation(); navigateToSelectedRental(); }, children: "Book Now" })] })] })] }));
+}

package/dist/misc/scroll-area.d.ts

@@ -0,0 +1,5 @@
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+declare function ScrollArea({ className, children, ...props }: React.ComponentProps<typeof ScrollAreaPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare function ScrollBar({ className, orientation, ...props }: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>): import("react/jsx-runtime").JSX.Element;
+export { ScrollArea, ScrollBar };
+//# sourceMappingURL=scroll-area.d.ts.map

package/dist/misc/scroll-area.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll-area.d.ts","sourceRoot":"","sources":["../../src/misc/scroll-area.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,mBAAmB,MAAM,6BAA6B,CAAA;AAIlE,iBAAS,UAAU,CAAC,EAClB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,mBAAmB,CAAC,IAAI,CAAC,2CAiBvD;AAED,iBAAS,SAAS,CAAC,EACjB,SAAS,EACT,WAAwB,EACxB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,mBAAmB,CAAC,mBAAmB,CAAC,2CAqBtE;AAED,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,CAAA"}

package/dist/misc/scroll-area.js

@@ -0,0 +1,13 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+import { cn } from "@myrjfa/state/dist/lib/utils";
+function ScrollArea({ className, children, ...props }) {
+    return (_jsxs(ScrollAreaPrimitive.Root, { "data-slot": "scroll-area", className: cn("relative", className), ...props, children: [_jsx(ScrollAreaPrimitive.Viewport, { "data-slot": "scroll-area-viewport", className: "ring-ring/10 dark:ring-ring/20 dark:outline-ring/40 outline-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] focus-visible:ring-4 focus-visible:outline-1", children: children }), _jsx(ScrollBar, {}), _jsx(ScrollAreaPrimitive.Corner, {})] }));
+}
+function ScrollBar({ className, orientation = "vertical", ...props }) {
+    return (_jsx(ScrollAreaPrimitive.ScrollAreaScrollbar, { "data-slot": "scroll-area-scrollbar", orientation: orientation, className: cn("flex touch-none p-px transition-colors select-none", orientation === "vertical" &&
+            "h-full w-2.5 border-l border-l-transparent", orientation === "horizontal" &&
+            "h-2.5 flex-col border-t border-t-transparent", className), ...props, children: _jsx(ScrollAreaPrimitive.ScrollAreaThumb, { "data-slot": "scroll-area-thumb", className: "bg-border relative flex-1 rounded-full" }) }));
+}
+export { ScrollArea, ScrollBar };

package/dist/misc/searchBar.d.ts

@@ -0,0 +1,6 @@
+interface SearchBarProps {
+    titles: string[];
+}
+export declare function SearchBar({ titles }: SearchBarProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=searchBar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"searchBar.d.ts","sourceRoot":"","sources":["../../src/misc/searchBar.tsx"],"names":[],"mappings":"AAOA,UAAU,cAAc;IACpB,MAAM,EAAE,MAAM,EAAE,CAAC;CACpB;AAqID,wBAAgB,SAAS,CAAC,EAAE,MAAM,EAAE,EAAE,cAAc,2CAMnD"}

package/dist/misc/searchBar.js

@@ -0,0 +1,89 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Search } from "lucide-react";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { Suspense, useEffect, useRef, useState } from "react";
+import { Button } from "./button";
+function SearchBarComponent({ titles }) {
+    const searchParams = useSearchParams();
+    const pathname = usePathname();
+    const router = useRouter();
+    const inputRef = useRef(null);
+    // State for search input and suggestions
+    const [searchQuery, setSearchQuery] = useState("");
+    const [showSuggestions, setShowSuggestions] = useState(false);
+    const [suggestions, setSuggestions] = useState([]);
+    const [highlightedIndex, setHighlightedIndex] = useState(-1);
+    useEffect(() => {
+        const query = searchParams.get("query") || "";
+        setSearchQuery(query);
+    }, [searchParams]);
+    // Update suggestions when search query changes
+    useEffect(() => {
+        if (searchQuery.trim() === "") {
+            setSuggestions([]);
+            setHighlightedIndex(-1);
+            return;
+        }
+        const filtered = titles
+            .filter(title => title.toLowerCase().includes(searchQuery.toLowerCase()))
+            .slice(0, 5); // Limit to top 5 suggestions
+        setSuggestions(filtered);
+        setHighlightedIndex(-1);
+    }, [searchQuery, titles]);
+    // Execute search by updating URL params
+    const executeSearch = () => {
+        const newParams = new URLSearchParams(searchParams);
+        // Reset to first page when searching
+        newParams.set("page", "1");
+        if (searchQuery.trim() !== "") {
+            newParams.set("query", searchQuery);
+        }
+        else {
+            newParams.delete("query");
+        }
+        router.push(`${pathname}?${newParams.toString()}`);
+        setShowSuggestions(false);
+    };
+    const handleKeyDown = (e) => {
+        if (e.key === "ArrowDown") {
+            e.preventDefault();
+            setShowSuggestions(true);
+            setHighlightedIndex((prev) => (prev + 1) % suggestions.length);
+        }
+        else if (e.key === "ArrowUp") {
+            e.preventDefault();
+            setShowSuggestions(true);
+            setHighlightedIndex((prev) => (prev - 1 + suggestions.length) % suggestions.length);
+        }
+        else if (e.key === "Enter") {
+            e.preventDefault();
+            if (highlightedIndex >= 0 && suggestions[highlightedIndex]) {
+                const selectedSuggestion = suggestions[highlightedIndex];
+                setSearchQuery(selectedSuggestion);
+                setHighlightedIndex(0);
+            }
+            else {
+                executeSearch();
+            }
+            setShowSuggestions(false);
+        }
+    };
+    // Select a suggestion
+    const handleSuggestionClick = (suggestion) => {
+        var _a;
+        setSearchQuery(suggestion);
+        setShowSuggestions(false);
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    };
+    return (_jsx("div", { className: "relative w-4/5 mx-auto bg-background shadow-md rounded-full px-4 py-2 md:max-w-5xl z-11", children: _jsxs("div", { className: "flex items-center", children: [_jsxs("div", { className: "relative flex-1", children: [_jsx("input", { ref: inputRef, type: "text", placeholder: "Search...", value: searchQuery, onChange: (e) => {
+                                setSearchQuery(e.target.value);
+                                setShowSuggestions(true);
+                            }, onKeyDown: handleKeyDown, onFocus: () => setShowSuggestions(searchQuery.trim() !== ""), onBlur: () => {
+                                // Delay hiding suggestions to allow clicking on them
+                                setTimeout(() => setShowSuggestions(false), 150);
+                            }, className: "w-full bg-transparent border-none outline-none py-2 px-3 text-gray-700" }), showSuggestions && suggestions.length > 0 && (_jsx("div", { className: "absolute top-full left-0 w-full mt-1 bg-white rounded-md shadow-lg z-15 max-h-60 overflow-y-auto", children: suggestions.map((suggestion, index) => (_jsx("div", { className: `px-4 py-2 text-sm cursor-pointer ${index === highlightedIndex ? 'bg-muted' : 'text-gray-700 hover:bg-muted'}`, onMouseDown: (e) => e.preventDefault(), onClick: () => handleSuggestionClick(suggestion), children: suggestion }, index))) }))] }), _jsx(Button, { variant: "default", onClick: executeSearch, className: "ml-4 w-10 h-10 rounded-full flex items-center justify-center cursor-pointer", children: _jsx(Search, { size: 18 }) })] }) }));
+}
+export function SearchBar({ titles }) {
+    return (_jsx(Suspense, { fallback: _jsx("div", { className: "w-full h-screen flex items-center justify-center", children: "Loading..." }), children: _jsx(SearchBarComponent, { titles: titles }) }));
+}

package/dist/misc/searchBox.d.ts

@@ -0,0 +1,13 @@
+interface SearchBarProps {
+    titles: string[];
+    id?: string;
+    placeholder?: string;
+    onChange?: (value: string) => void;
+    searchQuery?: string;
+    setSearchQuery?: (value: string) => void;
+    handleAdd: (searchQuery: string) => void;
+    clearOnSubmit?: boolean;
+}
+export declare function SearchBox({ titles, id, placeholder, onChange, searchQuery, setSearchQuery, handleAdd, clearOnSubmit }: SearchBarProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=searchBox.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"searchBox.d.ts","sourceRoot":"","sources":["../../src/misc/searchBox.tsx"],"names":[],"mappings":"AAIA,UAAU,cAAc;IACpB,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,SAAS,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,aAAa,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,wBAAgB,SAAS,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,WAAW,EAAE,cAAc,EAAE,SAAS,EAAE,aAAoB,EAAE,EAAE,cAAc,2CAiG5I"}

package/dist/misc/searchBox.js

@@ -0,0 +1,63 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+export function SearchBox({ titles, id, placeholder, onChange, searchQuery, setSearchQuery, handleAdd, clearOnSubmit = true }) {
+    const inputRef = useRef(null);
+    const [showSuggestions, setShowSuggestions] = useState(false);
+    const [suggestions, setSuggestions] = useState([]);
+    const [highlightedIndex, setHighlightedIndex] = useState(-1);
+    if (!setSearchQuery) {
+        [searchQuery, setSearchQuery] = useState("");
+    }
+    useEffect(() => {
+        if (searchQuery.trim() === "") {
+            setSuggestions([]);
+            setHighlightedIndex(-1);
+            return;
+        }
+        const filtered = titles
+            .filter((title) => title.toLowerCase().includes(searchQuery.toLowerCase()))
+            .slice(0, 5);
+        setSuggestions(filtered);
+        setHighlightedIndex(-1);
+    }, [searchQuery, titles]);
+    const handleKeyDown = (e) => {
+        if (e.key === "ArrowDown") {
+            e.preventDefault();
+            setShowSuggestions(true);
+            setHighlightedIndex((prev) => (prev + 1) % suggestions.length);
+        }
+        else if (e.key === "ArrowUp") {
+            e.preventDefault();
+            setShowSuggestions(true);
+            setHighlightedIndex((prev) => (prev - 1 + suggestions.length) % suggestions.length);
+        }
+        else if (e.key === "Enter") {
+            e.preventDefault();
+            if (highlightedIndex >= 0 && suggestions[highlightedIndex]) {
+                const selectedSuggestion = suggestions[highlightedIndex];
+                setSearchQuery(selectedSuggestion);
+                setHighlightedIndex(0);
+            }
+            else {
+                handleAdd(searchQuery);
+                if (clearOnSubmit)
+                    setSearchQuery("");
+            }
+            setShowSuggestions(false);
+        }
+    };
+    const handleSuggestionClick = (suggestion) => {
+        var _a;
+        setSearchQuery(suggestion);
+        setShowSuggestions(false);
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    };
+    return (_jsx("div", { className: "relative w-full mx-auto bg-background rounded-lg", children: _jsx("div", { className: "flex items-center", children: _jsxs("div", { className: "relative flex-1", children: [_jsx("input", { id: id !== null && id !== void 0 ? id : "", ref: inputRef, type: "text", placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : "Search...", value: searchQuery, onChange: (e) => {
+                            setSearchQuery(e.target.value);
+                            setShowSuggestions(true);
+                        }, onKeyDown: handleKeyDown, onFocus: () => setShowSuggestions(searchQuery.trim() !== ""), onBlur: (e) => {
+                            // Delay hiding to allow click
+                            setTimeout(() => setShowSuggestions(false), 150);
+                        }, className: "w-full bg-transparent border border-input rounded-md py-2 px-3 text-sm text-gray-700 focus:outline-none z-11" }), showSuggestions && suggestions.length > 0 && (_jsx("div", { className: "absolute top-full left-0 w-full mt-1 bg-white rounded-md shadow-lg z-100 max-h-60 overflow-y-auto border border-muted", children: suggestions.map((suggestion, index) => (_jsx("div", { className: `px-4 py-2 text-sm cursor-pointer ${index === highlightedIndex ? 'bg-muted' : 'text-gray-700 hover:bg-muted'}`, onMouseDown: (e) => e.preventDefault(), onClick: () => handleSuggestionClick(suggestion), children: suggestion }, index))) }))] }) }) }));
+}

package/dist/misc/select.d.ts

@@ -0,0 +1,13 @@
+import * as SelectPrimitive from "@radix-ui/react-select";
+declare function Select({ ...props }: React.ComponentProps<typeof SelectPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare function SelectGroup({ ...props }: React.ComponentProps<typeof SelectPrimitive.Group>): import("react/jsx-runtime").JSX.Element;
+declare function SelectValue({ ...props }: React.ComponentProps<typeof SelectPrimitive.Value>): import("react/jsx-runtime").JSX.Element;
+declare function SelectTrigger({ className, children, ...props }: React.ComponentProps<typeof SelectPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
+declare function SelectContent({ className, children, position, ...props }: React.ComponentProps<typeof SelectPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
+declare function SelectLabel({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Label>): import("react/jsx-runtime").JSX.Element;
+declare function SelectItem({ className, children, ...props }: React.ComponentProps<typeof SelectPrimitive.Item>): import("react/jsx-runtime").JSX.Element;
+declare function SelectSeparator({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Separator>): import("react/jsx-runtime").JSX.Element;
+declare function SelectScrollUpButton({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>): import("react/jsx-runtime").JSX.Element;
+declare function SelectScrollDownButton({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>): import("react/jsx-runtime").JSX.Element;
+export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, };
+//# sourceMappingURL=select.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../src/misc/select.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAA;AAKzD,iBAAS,MAAM,CAAC,EACd,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,2CAEnD;AAED,iBAAS,WAAW,CAAC,EACnB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,2CAEpD;AAED,iBAAS,WAAW,CAAC,EACnB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,2CAEpD;AAED,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,2CAgBtD;AAED,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,QAAQ,EACR,QAAmB,EACnB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,2CA6BtD;AAED,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,2CAQpD;AAED,iBAAS,UAAU,CAAC,EAClB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,2CAkBnD;AAED,iBAAS,eAAe,CAAC,EACvB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,SAAS,CAAC,2CAQxD;AAED,iBAAS,oBAAoB,CAAC,EAC5B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,cAAc,CAAC,2CAa7D;AAED,iBAAS,sBAAsB,CAAC,EAC9B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,gBAAgB,CAAC,2CAa/D;AAED,OAAO,EACL,MAAM,EACN,aAAa,EACb,WAAW,EACX,UAAU,EACV,WAAW,EACX,sBAAsB,EACtB,oBAAoB,EACpB,eAAe,EACf,aAAa,EACb,WAAW,GACZ,CAAA"}

package/dist/misc/select.js

@@ -0,0 +1,38 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { cn } from "@myrjfa/state/dist/lib/utils";
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
+function Select({ ...props }) {
+    return _jsx(SelectPrimitive.Root, { "data-slot": "select", ...props });
+}
+function SelectGroup({ ...props }) {
+    return _jsx(SelectPrimitive.Group, { "data-slot": "select-group", ...props });
+}
+function SelectValue({ ...props }) {
+    return _jsx(SelectPrimitive.Value, { "data-slot": "select-value", ...props });
+}
+function SelectTrigger({ className, children, ...props }) {
+    return (_jsxs(SelectPrimitive.Trigger, { "data-slot": "select-trigger", className: cn("border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive flex h-9 w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), ...props, children: [children, _jsx(SelectPrimitive.Icon, { asChild: true, children: _jsx(ChevronDownIcon, { className: "size-4 opacity-50" }) })] }));
+}
+function SelectContent({ className, children, position = "popper", ...props }) {
+    return (_jsx(SelectPrimitive.Portal, { children: _jsxs(SelectPrimitive.Content, { "data-slot": "select-content", className: cn("bg-popover text-popover-foreground 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-[310] max-h-96 min-w-[8rem] overflow-hidden rounded-md border shadow-md pointer-events-auto", position === "popper" &&
+                "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className), position: position, onWheel: (e) => e.stopPropagation(), ...props, children: [_jsx(SelectScrollUpButton, {}), _jsx(SelectPrimitive.Viewport, { className: cn("p-1", position === "popper" &&
+                        "h-full max-h-[var(--radix-select-content-available-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1 overflow-y-auto touch-pan-y"), children: children }), _jsx(SelectScrollDownButton, {})] }) }));
+}
+function SelectLabel({ className, ...props }) {
+    return (_jsx(SelectPrimitive.Label, { "data-slot": "select-label", className: cn("px-2 py-1.5 text-sm font-medium", className), ...props }));
+}
+function SelectItem({ className, children, ...props }) {
+    return (_jsxs(SelectPrimitive.Item, { "data-slot": "select-item", className: cn("focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2", className), ...props, children: [_jsx("span", { className: "absolute right-2 flex size-3.5 items-center justify-center", children: _jsx(SelectPrimitive.ItemIndicator, { children: _jsx(CheckIcon, { className: "size-4" }) }) }), _jsx(SelectPrimitive.ItemText, { children: children })] }));
+}
+function SelectSeparator({ className, ...props }) {
+    return (_jsx(SelectPrimitive.Separator, { "data-slot": "select-separator", className: cn("bg-border pointer-events-none -mx-1 my-1 h-px", className), ...props }));
+}
+function SelectScrollUpButton({ className, ...props }) {
+    return (_jsx(SelectPrimitive.ScrollUpButton, { "data-slot": "select-scroll-up-button", className: cn("flex cursor-default items-center justify-center py-1", className), ...props, children: _jsx(ChevronUpIcon, { className: "size-4" }) }));
+}
+function SelectScrollDownButton({ className, ...props }) {
+    return (_jsx(SelectPrimitive.ScrollDownButton, { "data-slot": "select-scroll-down-button", className: cn("flex cursor-default items-center justify-center py-1", className), ...props, children: _jsx(ChevronDownIcon, { className: "size-4" }) }));
+}
+export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, };

package/dist/misc/separator.d.ts

@@ -0,0 +1,4 @@
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+declare function Separator({ className, orientation, decorative, ...props }: React.ComponentProps<typeof SeparatorPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+export { Separator };
+//# sourceMappingURL=separator.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"separator.d.ts","sourceRoot":"","sources":["../../src/misc/separator.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,kBAAkB,MAAM,2BAA2B,CAAA;AAI/D,iBAAS,SAAS,CAAC,EACjB,SAAS,EACT,WAA0B,EAC1B,UAAiB,EACjB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,IAAI,CAAC,2CAatD;AAED,OAAO,EAAE,SAAS,EAAE,CAAA"}

package/dist/misc/separator.js

@@ -0,0 +1,8 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+import { cn } from "@myrjfa/state/dist/lib/utils";
+function Separator({ className, orientation = "horizontal", decorative = true, ...props }) {
+    return (_jsx(SeparatorPrimitive.Root, { "data-slot": "separator-root", decorative: decorative, orientation: orientation, className: cn("bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px", className), ...props }));
+}
+export { Separator };

package/dist/misc/share.d.ts

@@ -0,0 +1,5 @@
+declare const ShareButton: ({ label }: {
+    label?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export { ShareButton };
+//# sourceMappingURL=share.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"share.d.ts","sourceRoot":"","sources":["../../src/misc/share.tsx"],"names":[],"mappings":"AAoBA,QAAA,MAAM,WAAW,GAAI,WAAqB;IAAE,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,4CAoO3D,CAAC;AAEF,OAAO,EAAE,WAAW,EAAE,CAAC"}