@myrjfa/ui 1.0.0

package/dist/misc/searchBar.js

@@ -0,0 +1,93 @@
+'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(_a) {
+    var titles = _a.titles;
+    var searchParams = useSearchParams();
+    var pathname = usePathname();
+    var router = useRouter();
+    var inputRef = useRef(null);
+    // State for search input and suggestions
+    var _b = useState(""), searchQuery = _b[0], setSearchQuery = _b[1];
+    var _c = useState(false), showSuggestions = _c[0], setShowSuggestions = _c[1];
+    var _d = useState([]), suggestions = _d[0], setSuggestions = _d[1];
+    var _e = useState(-1), highlightedIndex = _e[0], setHighlightedIndex = _e[1];
+    useEffect(function () {
+        var query = searchParams.get("query") || "";
+        setSearchQuery(query);
+    }, [searchParams]);
+    // Update suggestions when search query changes
+    useEffect(function () {
+        if (searchQuery.trim() === "") {
+            setSuggestions([]);
+            setHighlightedIndex(-1);
+            return;
+        }
+        var filtered = titles
+            .filter(function (title) {
+            return 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
+    var executeSearch = function () {
+        var 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("".concat(pathname, "?").concat(newParams.toString()));
+        setShowSuggestions(false);
+    };
+    var handleKeyDown = function (e) {
+        if (e.key === "ArrowDown") {
+            e.preventDefault();
+            setShowSuggestions(true);
+            setHighlightedIndex(function (prev) { return (prev + 1) % suggestions.length; });
+        }
+        else if (e.key === "ArrowUp") {
+            e.preventDefault();
+            setShowSuggestions(true);
+            setHighlightedIndex(function (prev) { return (prev - 1 + suggestions.length) % suggestions.length; });
+        }
+        else if (e.key === "Enter") {
+            e.preventDefault();
+            if (highlightedIndex >= 0 && suggestions[highlightedIndex]) {
+                var selectedSuggestion = suggestions[highlightedIndex];
+                setSearchQuery(selectedSuggestion);
+                setHighlightedIndex(0);
+            }
+            else {
+                executeSearch();
+            }
+            setShowSuggestions(false);
+        }
+    };
+    // Select a suggestion
+    var handleSuggestionClick = function (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: function (e) {
+                                setSearchQuery(e.target.value);
+                                setShowSuggestions(true);
+                            }, onKeyDown: handleKeyDown, onFocus: function () { return setShowSuggestions(searchQuery.trim() !== ""); }, onBlur: function () {
+                                // Delay hiding suggestions to allow clicking on them
+                                setTimeout(function () { return 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(function (suggestion, index) { return (_jsx("div", { className: "px-4 py-2 text-sm cursor-pointer ".concat(index === highlightedIndex ? 'bg-muted' : 'text-gray-700 hover:bg-muted'), onMouseDown: function (e) { return e.preventDefault(); }, onClick: function () { return 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 default function SearchBar(_a) {
+    var titles = _a.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,12 @@
+interface SearchBarProps {
+    titles: string[];
+    id?: string;
+    placeholder?: string;
+    onChange?: (value: string) => void;
+    searchQuery?: string;
+    setSearchQuery?: (value: string) => void;
+    handleAdd: (searchQuery: string) => void;
+}
+export declare function SearchBox({ titles, id, placeholder, onChange, searchQuery, setSearchQuery, handleAdd }: 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;CAC5C;AAED,wBAAgB,SAAS,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,WAAW,EAAE,cAAc,EAAE,SAAS,EAAE,EAAE,cAAc,2CAiGtH"}

package/dist/misc/searchBox.js

@@ -0,0 +1,66 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+export function SearchBox(_a) {
+    var _b;
+    var titles = _a.titles, id = _a.id, placeholder = _a.placeholder, onChange = _a.onChange, searchQuery = _a.searchQuery, setSearchQuery = _a.setSearchQuery, handleAdd = _a.handleAdd;
+    var inputRef = useRef(null);
+    var _c = useState(false), showSuggestions = _c[0], setShowSuggestions = _c[1];
+    var _d = useState([]), suggestions = _d[0], setSuggestions = _d[1];
+    var _e = useState(-1), highlightedIndex = _e[0], setHighlightedIndex = _e[1];
+    if (!setSearchQuery) {
+        _b = useState(""), searchQuery = _b[0], setSearchQuery = _b[1];
+    }
+    useEffect(function () {
+        if (searchQuery.trim() === "") {
+            setSuggestions([]);
+            setHighlightedIndex(-1);
+            return;
+        }
+        var filtered = titles
+            .filter(function (title) {
+            return title.toLowerCase().includes(searchQuery.toLowerCase());
+        })
+            .slice(0, 5);
+        setSuggestions(filtered);
+        setHighlightedIndex(-1);
+    }, [searchQuery, titles]);
+    var handleKeyDown = function (e) {
+        if (e.key === "ArrowDown") {
+            e.preventDefault();
+            setShowSuggestions(true);
+            setHighlightedIndex(function (prev) { return (prev + 1) % suggestions.length; });
+        }
+        else if (e.key === "ArrowUp") {
+            e.preventDefault();
+            setShowSuggestions(true);
+            setHighlightedIndex(function (prev) { return (prev - 1 + suggestions.length) % suggestions.length; });
+        }
+        else if (e.key === "Enter") {
+            e.preventDefault();
+            if (highlightedIndex >= 0 && suggestions[highlightedIndex]) {
+                var selectedSuggestion = suggestions[highlightedIndex];
+                setSearchQuery(selectedSuggestion);
+                setHighlightedIndex(0);
+            }
+            else {
+                handleAdd(searchQuery);
+                setSearchQuery("");
+            }
+            setShowSuggestions(false);
+        }
+    };
+    var handleSuggestionClick = function (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: function (e) {
+                            setSearchQuery(e.target.value);
+                            setShowSuggestions(true);
+                        }, onKeyDown: handleKeyDown, onFocus: function () { return setShowSuggestions(searchQuery.trim() !== ""); }, onBlur: function (e) {
+                            // Delay hiding to allow click
+                            setTimeout(function () { return 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(function (suggestion, index) { return (_jsx("div", { className: "px-4 py-2 text-sm cursor-pointer ".concat(index === highlightedIndex ? 'bg-muted' : 'text-gray-700 hover:bg-muted'), onMouseDown: function (e) { return e.preventDefault(); }, onClick: function () { return 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,2CA4BtD;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,70 @@
+"use client";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+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(_a) {
+    var props = __rest(_a, []);
+    return _jsx(SelectPrimitive.Root, __assign({ "data-slot": "select" }, props));
+}
+function SelectGroup(_a) {
+    var props = __rest(_a, []);
+    return _jsx(SelectPrimitive.Group, __assign({ "data-slot": "select-group" }, props));
+}
+function SelectValue(_a) {
+    var props = __rest(_a, []);
+    return _jsx(SelectPrimitive.Value, __assign({ "data-slot": "select-value" }, props));
+}
+function SelectTrigger(_a) {
+    var className = _a.className, children = _a.children, props = __rest(_a, ["className", "children"]);
+    return (_jsxs(SelectPrimitive.Trigger, __assign({ "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(_a) {
+    var className = _a.className, children = _a.children, _b = _a.position, position = _b === void 0 ? "popper" : _b, props = __rest(_a, ["className", "children", "position"]);
+    return (_jsx(SelectPrimitive.Portal, { children: _jsxs(SelectPrimitive.Content, __assign({ "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-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border shadow-md", 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 }, props, { children: [_jsx(SelectScrollUpButton, {}), _jsx(SelectPrimitive.Viewport, { className: cn("p-1", position === "popper" &&
+                        "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"), children: children }), _jsx(SelectScrollDownButton, {})] })) }));
+}
+function SelectLabel(_a) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (_jsx(SelectPrimitive.Label, __assign({ "data-slot": "select-label", className: cn("px-2 py-1.5 text-sm font-medium", className) }, props)));
+}
+function SelectItem(_a) {
+    var className = _a.className, children = _a.children, props = __rest(_a, ["className", "children"]);
+    return (_jsxs(SelectPrimitive.Item, __assign({ "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(_a) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (_jsx(SelectPrimitive.Separator, __assign({ "data-slot": "select-separator", className: cn("bg-border pointer-events-none -mx-1 my-1 h-px", className) }, props)));
+}
+function SelectScrollUpButton(_a) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (_jsx(SelectPrimitive.ScrollUpButton, __assign({ "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(_a) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (_jsx(SelectPrimitive.ScrollDownButton, __assign({ "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,31 @@
+"use client";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+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(_a) {
+    var className = _a.className, _b = _a.orientation, orientation = _b === void 0 ? "horizontal" : _b, _c = _a.decorative, decorative = _c === void 0 ? true : _c, props = __rest(_a, ["className", "orientation", "decorative"]);
+    return (_jsx(SeparatorPrimitive.Root, __assign({ "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 default 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,eAAe,WAAW,CAAC"}

package/dist/misc/share.js

@@ -0,0 +1,213 @@
+"use client";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { DialogTitle } from "@radix-ui/react-dialog";
+import { Mail, Share2 } from "lucide-react";
+import { useEffect, useState } from "react";
+import { FaFacebook, FaLinkedin, FaPinterest, FaReddit, FaTelegram, FaTumblr, FaWhatsapp, FaXTwitter } from "react-icons/fa6";
+import { EmailShareButton, FacebookShareButton, LinkedinShareButton, PinterestShareButton, RedditShareButton, TelegramShareButton, TumblrShareButton, TwitterShareButton, WhatsappShareButton, } from "react-share";
+import { Button } from "./button";
+import { Dialog, DialogContent } from "./dialog";
+var ShareButton = function (_a) {
+    var _b = _a.label, label = _b === void 0 ? "Share" : _b;
+    var _c = useState(false), open = _c[0], setOpen = _c[1];
+    var _d = useState(false), canUseNativeShare = _d[0], setCanUseNativeShare = _d[1];
+    var _e = useState(false), copied = _e[0], setCopied = _e[1];
+    var _f = useState({
+        title: "",
+        description: "",
+        image: "",
+        url: ""
+    }), pageMetadata = _f[0], setPageMetadata = _f[1];
+    // Extract metadata from page on component mount
+    useEffect(function () {
+        var _a, _b, _c, _d, _e, _f, _g;
+        var currentUrl = window.location.href;
+        var ogTitle = (_a = document.querySelector('meta[property="og:title"]')) === null || _a === void 0 ? void 0 : _a.getAttribute('content');
+        var twitterTitle = (_b = document.querySelector('meta[name="twitter:title"]')) === null || _b === void 0 ? void 0 : _b.getAttribute('content');
+        var title = ogTitle || twitterTitle || document.title || "Check out this page";
+        var ogDescription = (_c = document.querySelector('meta[property="og:description"]')) === null || _c === void 0 ? void 0 : _c.getAttribute('content');
+        var twitterDescription = (_d = document.querySelector('meta[name="twitter:description"]')) === null || _d === void 0 ? void 0 : _d.getAttribute('content');
+        var metaDescription = (_e = document.querySelector('meta[name="description"]')) === null || _e === void 0 ? void 0 : _e.getAttribute('content');
+        var description = ogDescription || twitterDescription || metaDescription || "I found something interesting to share";
+        var ogImage = (_f = document.querySelector('meta[property="og:image"]')) === null || _f === void 0 ? void 0 : _f.getAttribute('content');
+        var twitterImage = (_g = document.querySelector('meta[name="twitter:image"]')) === null || _g === void 0 ? void 0 : _g.getAttribute('content');
+        var image = ogImage || twitterImage || "";
+        setPageMetadata({
+            title: title,
+            description: description,
+            image: image,
+            url: currentUrl
+        });
+        setCanUseNativeShare(!!navigator.share);
+    }, []);
+    // Reset copied state after 2 seconds
+    useEffect(function () {
+        if (copied) {
+            var timer_1 = setTimeout(function () { return setCopied(false); }, 2000);
+            return function () { return clearTimeout(timer_1); };
+        }
+    }, [copied]);
+    // Handle share button click
+    var handleShareClick = function () { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!canUseNativeShare) return [3 /*break*/, 2];
+                    return [4 /*yield*/, navigator.share({
+                            title: pageMetadata.title,
+                            text: pageMetadata.description,
+                            url: pageMetadata.url,
+                        })];
+                case 1:
+                    _a.sent();
+                    return [3 /*break*/, 3];
+                case 2:
+                    // Native sharing not available, use custom dialog
+                    setOpen(true);
+                    _a.label = 3;
+                case 3: return [2 /*return*/];
+            }
+        });
+    }); };
+    // Handle copying URL to clipboard
+    var handleCopyLink = function () {
+        navigator.clipboard.writeText(pageMetadata.url);
+        setCopied(true);
+    };
+    // Define the share platforms with their metadata
+    var sharePlatforms = [
+        {
+            name: "Facebook",
+            icon: _jsx(FaFacebook, { className: "w-6 h-6 text-blue-600" }),
+            component: FacebookShareButton,
+            props: {
+                url: pageMetadata.url,
+                quote: "".concat(pageMetadata.title, "\n").concat(pageMetadata.description),
+                hashtag: "#Trippeaze"
+            }
+        },
+        {
+            name: "Twitter",
+            icon: _jsx(FaXTwitter, { className: "w-6 h-6 text-gray-800" }),
+            component: TwitterShareButton,
+            props: {
+                url: pageMetadata.url,
+                title: "".concat(pageMetadata.title, "\n").concat(pageMetadata.description),
+                via: "Trippeaze",
+                hashtags: ["Trippeaze", "Travel"]
+            }
+        },
+        {
+            name: "WhatsApp",
+            icon: _jsx(FaWhatsapp, { className: "w-6 h-6 text-green-500" }),
+            component: WhatsappShareButton,
+            props: {
+                url: pageMetadata.url,
+                title: "".concat(pageMetadata.title, "\n").concat(pageMetadata.description),
+                separator: "\n"
+            }
+        },
+        {
+            name: "LinkedIn",
+            icon: _jsx(FaLinkedin, { className: "w-6 h-6 text-blue-700" }),
+            component: LinkedinShareButton,
+            props: {
+                url: pageMetadata.url,
+                title: pageMetadata.title,
+                summary: pageMetadata.description,
+                source: "Trippeaze"
+            }
+        },
+        {
+            name: "Telegram",
+            icon: _jsx(FaTelegram, { className: "w-6 h-6 text-blue-500" }),
+            component: TelegramShareButton,
+            props: {
+                url: pageMetadata.url,
+                title: "".concat(pageMetadata.title, "\n").concat(pageMetadata.description)
+            }
+        },
+        {
+            name: "Reddit",
+            icon: _jsx(FaReddit, { className: "w-6 h-6 text-orange-500" }),
+            component: RedditShareButton,
+            props: {
+                url: pageMetadata.url,
+                title: "".concat(pageMetadata.title, "\n").concat(pageMetadata.description)
+            }
+        },
+        {
+            name: "Tumblr",
+            icon: _jsx(FaTumblr, { className: "w-6 h-6 text-gray-900" }),
+            component: TumblrShareButton,
+            props: {
+                url: pageMetadata.url,
+                title: pageMetadata.title,
+                caption: pageMetadata.description,
+                tags: ["Trippeaze", "Travel"]
+            }
+        },
+        {
+            name: "Email",
+            icon: _jsx(Mail, { className: "w-6 h-6 text-gray-600" }),
+            component: EmailShareButton,
+            props: {
+                url: pageMetadata.url,
+                subject: pageMetadata.title,
+                body: "".concat(pageMetadata.description, "\n\n").concat(pageMetadata.url)
+            }
+        },
+    ];
+    return (_jsxs(_Fragment, { children: [_jsxs(Button, { variant: "outline", className: "flex items-center gap-2 px-4 py-2 hover:bg-gray-100 transition-all", onClick: handleShareClick, "aria-label": "Share this page", children: [_jsx(Share2, { className: "w-4 h-4" }), _jsx("span", { className: "hidden md:block", children: label })] }), _jsx(Dialog, { open: open, onOpenChange: setOpen, children: _jsx(DialogContent, { className: "sm:max-w-md p-0 rounded-lg overflow-hidden shadow-xl", children: _jsxs("div", { className: "p-4 sm:p-6", children: [_jsxs("div", { className: "mb-4 flex flex-col gap-2", children: [_jsx(DialogTitle, { className: "text-lg font-semibold", children: "Share this page" }), _jsxs("div", { className: "relative flex items-center", children: [_jsx("input", { type: "text", readOnly: true, value: pageMetadata.url, className: "w-full bg-gray-50 border border-gray-200 rounded-lg py-2 px-3 text-sm pr-20 overflow-hidden text-ellipsis", "aria-label": "Page URL" }), _jsx(Button, { variant: "ghost", className: "absolute right-1 top-1/2 -translate-y-1/2 h-7 rounded-md text-xs px-3 text-blue-600 hover:bg-blue-50", onClick: handleCopyLink, "aria-label": "Copy link to clipboard", children: copied ? "Copied!" : "Copy" })] })] }), _jsxs("div", { className: "grid grid-cols-3 sm:grid-cols-3 gap-4 sm:gap-6", children: [sharePlatforms.map(function (platform, index) {
+                                        var ShareComponent = platform.component;
+                                        return (_jsx(ShareComponent, __assign({}, platform.props, { className: "flex flex-col items-center justify-center", children: _jsxs("div", { className: "flex flex-col items-center justify-center gap-2 p-3 rounded-lg hover:bg-gray-50 transition-colors w-full", children: [platform.icon, _jsx("span", { className: "text-xs font-medium text-gray-700", children: platform.name })] }) }), index));
+                                    }), pageMetadata.image && (_jsx(PinterestShareButton, { url: pageMetadata.url, media: pageMetadata.image, description: pageMetadata.description, className: "flex flex-col items-center justify-center", children: _jsxs("div", { className: "flex flex-col items-center justify-center gap-2 p-3 rounded-lg hover:bg-gray-50 transition-colors w-full", children: [_jsx(FaPinterest, { className: "w-6 h-6 text-red-600" }), _jsx("span", { className: "text-xs font-medium text-gray-700", children: "Pinterest" })] }) }))] })] }) }) })] }));
+};
+export default ShareButton;

package/dist/misc/sheet.d.ts

@@ -0,0 +1,13 @@
+import * as SheetPrimitive from "@radix-ui/react-dialog";
+declare function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare function SheetTrigger({ ...props }: React.ComponentProps<typeof SheetPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
+declare function SheetClose({ ...props }: React.ComponentProps<typeof SheetPrimitive.Close>): import("react/jsx-runtime").JSX.Element;
+declare function SheetContent({ className, children, side, ...props }: React.ComponentProps<typeof SheetPrimitive.Content> & {
+    side?: "top" | "right" | "bottom" | "left";
+}): import("react/jsx-runtime").JSX.Element;
+declare function SheetHeader({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function SheetFooter({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function SheetTitle({ className, ...props }: React.ComponentProps<typeof SheetPrimitive.Title>): import("react/jsx-runtime").JSX.Element;
+declare function SheetDescription({ className, ...props }: React.ComponentProps<typeof SheetPrimitive.Description>): import("react/jsx-runtime").JSX.Element;
+export { Sheet, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription, };
+//# sourceMappingURL=sheet.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sheet.d.ts","sourceRoot":"","sources":["../../src/misc/sheet.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,cAAc,MAAM,wBAAwB,CAAA;AAKxD,iBAAS,KAAK,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,IAAI,CAAC,2CAE5E;AAED,iBAAS,YAAY,CAAC,EACpB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,OAAO,CAAC,2CAErD;AAED,iBAAS,UAAU,CAAC,EAClB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,KAAK,CAAC,2CAEnD;AAwBD,iBAAS,YAAY,CAAC,EACpB,SAAS,EACT,QAAQ,EACR,IAAc,EACd,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,OAAO,CAAC,GAAG;IACvD,IAAI,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAA;CAC3C,2CA4BA;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAQxE;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAQxE;AAED,iBAAS,UAAU,CAAC,EAClB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,KAAK,CAAC,2CAQnD;AAED,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,WAAW,CAAC,2CAQzD;AAED,OAAO,EACL,KAAK,EACL,YAAY,EACZ,UAAU,EACV,YAAY,EACZ,WAAW,EACX,WAAW,EACX,UAAU,EACV,gBAAgB,GACjB,CAAA"}

package/dist/misc/sheet.js

@@ -0,0 +1,72 @@
+"use client";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as SheetPrimitive from "@radix-ui/react-dialog";
+import { cn } from "@myrjfa/state/dist/lib/utils";
+import { XIcon } from "lucide-react";
+function Sheet(_a) {
+    var props = __rest(_a, []);
+    return _jsx(SheetPrimitive.Root, __assign({ "data-slot": "sheet" }, props));
+}
+function SheetTrigger(_a) {
+    var props = __rest(_a, []);
+    return _jsx(SheetPrimitive.Trigger, __assign({ "data-slot": "sheet-trigger" }, props));
+}
+function SheetClose(_a) {
+    var props = __rest(_a, []);
+    return _jsx(SheetPrimitive.Close, __assign({ "data-slot": "sheet-close" }, props));
+}
+function SheetPortal(_a) {
+    var props = __rest(_a, []);
+    return _jsx(SheetPrimitive.Portal, __assign({ "data-slot": "sheet-portal" }, props));
+}
+function SheetOverlay(_a) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (_jsx(SheetPrimitive.Overlay, __assign({ "data-slot": "sheet-overlay", className: cn("data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80", className) }, props)));
+}
+function SheetContent(_a) {
+    var className = _a.className, children = _a.children, _b = _a.side, side = _b === void 0 ? "right" : _b, props = __rest(_a, ["className", "children", "side"]);
+    return (_jsxs(SheetPortal, { children: [_jsx(SheetOverlay, {}), _jsxs(SheetPrimitive.Content, __assign({ "data-slot": "sheet-content", className: cn("bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500", side === "right" &&
+                    "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm", side === "left" &&
+                    "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm", side === "top" &&
+                    "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b", side === "bottom" &&
+                    "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t", className) }, props, { children: [children, _jsxs(SheetPrimitive.Close, { className: "ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none", children: [_jsx(XIcon, { className: "size-4" }), _jsx("span", { className: "sr-only", children: "Close" })] })] }))] }));
+}
+function SheetHeader(_a) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (_jsx("div", __assign({ "data-slot": "sheet-header", className: cn("flex flex-col gap-1.5 p-4", className) }, props)));
+}
+function SheetFooter(_a) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (_jsx("div", __assign({ "data-slot": "sheet-footer", className: cn("mt-auto flex flex-col gap-2 p-4", className) }, props)));
+}
+function SheetTitle(_a) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (_jsx(SheetPrimitive.Title, __assign({ "data-slot": "sheet-title", className: cn("text-foreground font-semibold", className) }, props)));
+}
+function SheetDescription(_a) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (_jsx(SheetPrimitive.Description, __assign({ "data-slot": "sheet-description", className: cn("text-muted-foreground text-sm", className) }, props)));
+}
+export { Sheet, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription, };