@myrjfa/ui 1.0.0

package/dist/misc/file-preview.js

@@ -0,0 +1,130 @@
+'use client';
+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 } from "react/jsx-runtime";
+import { FileIcon, ImageIcon, VideoIcon } from 'lucide-react';
+import { useState } from 'react';
+import { showAlert } from './alertdialogclaude';
+import { Button } from './button';
+var mimeMap = {
+    '.pdf': 'application/pdf',
+    '.jpg': 'image/jpeg',
+    '.jpeg': 'image/jpeg',
+    '.png': 'image/png',
+    '.gif': 'image/gif',
+    '.webp': 'image/webp',
+    '.mp4': 'video/mp4',
+    '.webm': 'video/webm',
+    '.mov': 'video/quicktime',
+    // Add more as needed
+};
+var imageTypes = ["jpg", "jpeg", "png", "gif", "webp"];
+var videotypes = ["mp4", "webm"];
+var docTypes = ["pdf"];
+var DocumentPreviewButton = function (_a) {
+    var filepath = _a.filepath, label = _a.label, icon = _a.icon, _b = _a.size, size = _b === void 0 ? 'default' : _b;
+    var _c = useState(false), loading = _c[0], setLoading = _c[1];
+    var labelInternal = label;
+    var IconInternal = icon || _jsx(FileIcon, { className: "h-8 w-8 text-chart-2" });
+    if (typeof filepath === 'string') {
+        var ext = filepath.split('.').pop() || "unknown";
+        if (imageTypes.includes(ext)) {
+            labelInternal = label || "View Image";
+            IconInternal = icon || _jsx(ImageIcon, { className: "h-8 w-8 text-chart-2" });
+        }
+        else if (videotypes.includes(ext)) {
+            labelInternal = label || "View Video";
+            IconInternal = icon || _jsx(VideoIcon, { className: "h-8 w-8 text-chart-2" });
+        }
+        else if (docTypes.includes(ext)) {
+            labelInternal = label || "View Doc";
+        }
+    }
+    var handleOpenFile = function () { return __awaiter(void 0, void 0, void 0, function () {
+        var blob, response, rawBlob, matchedExt, type, fileURL, error_1;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    _a.trys.push([0, 9, 11, 12]);
+                    setLoading(true);
+                    blob = void 0;
+                    if (!(typeof filepath === 'string')) return [3 /*break*/, 5];
+                    return [4 /*yield*/, fetch(filepath)];
+                case 1:
+                    response = _a.sent();
+                    if (!!response.ok) return [3 /*break*/, 3];
+                    return [4 /*yield*/, showAlert('Error fetching file')];
+                case 2:
+                    _a.sent();
+                    return [2 /*return*/];
+                case 3: return [4 /*yield*/, response.blob()];
+                case 4:
+                    rawBlob = _a.sent();
+                    console.log('Blob type:', rawBlob.type);
+                    matchedExt = Object.keys(mimeMap).find(function (ext) { return filepath.toLowerCase().endsWith(ext); });
+                    type = matchedExt ? mimeMap[matchedExt] : rawBlob.type;
+                    blob = new Blob([rawBlob], { type: type }); // Force correct type
+                    return [3 /*break*/, 8];
+                case 5:
+                    if (!(filepath instanceof File)) return [3 /*break*/, 6];
+                    blob = new Blob([filepath], { type: 'application/pdf' });
+                    return [3 /*break*/, 8];
+                case 6: return [4 /*yield*/, showAlert('Invalid file')];
+                case 7:
+                    _a.sent();
+                    return [2 /*return*/];
+                case 8:
+                    fileURL = URL.createObjectURL(blob);
+                    window.open(fileURL, '_blank', 'noopener,noreferrer');
+                    return [3 /*break*/, 12];
+                case 9:
+                    error_1 = _a.sent();
+                    console.error('Error opening file:', error_1);
+                    return [4 /*yield*/, showAlert('Could not open document.')];
+                case 10:
+                    _a.sent();
+                    return [3 /*break*/, 12];
+                case 11:
+                    setLoading(false);
+                    return [7 /*endfinally*/];
+                case 12: return [2 /*return*/];
+            }
+        });
+    }); };
+    return (_jsxs("div", { className: "flex flex-col items-center", children: [_jsxs(Button, { variant: "outline", size: size, className: "w-full cursor-pointer hidden md:flex", onClick: handleOpenFile, disabled: loading, children: [IconInternal, labelInternal] }), _jsx(Button, { variant: "outline", size: size, className: "w-full cursor-pointer flex md:hidden", onClick: handleOpenFile, disabled: loading, children: IconInternal })] }));
+};
+export default DocumentPreviewButton;

package/dist/misc/filter.d.ts

@@ -0,0 +1,12 @@
+type FilterProps = {
+    values: string[];
+    label: string;
+    formType: string;
+    selectedValue: string | null;
+    onChange: (value: string | null) => void;
+    others?: boolean;
+};
+export declare const uniqDecoded: (arr: string[]) => string[];
+declare const Filter: React.FC<FilterProps>;
+export default Filter;
+//# sourceMappingURL=filter.d.ts.map

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

@@ -0,0 +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,CAAC;IAC7B,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,eAAe,MAAM,CAAC"}

package/dist/misc/filter.js

@@ -0,0 +1,47 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "@myrjfa/state/dist/lib/utils";
+import { Check, ChevronDown } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import { Button } from "./button";
+import { Command, CommandEmpty, CommandInput, CommandItem, CommandList } from "./command";
+import { Input } from "./input";
+import { Popover, PopoverContent, PopoverTrigger } from "./popover";
+import { Select, SelectContent, SelectItem, SelectTrigger } from "./select";
+export var uniqDecoded = function (arr) {
+    return Array.from(new Set(arr.map(function (v) { return decodeURIComponent(v.trim().toLowerCase()); })));
+};
+var Filter = function (_a) {
+    var _b;
+    var values = _a.values, label = _a.label, formType = _a.formType, selectedValue = _a.selectedValue, onChange = _a.onChange, others = _a.others;
+    var _c = useState(false), open = _c[0], setOpen = _c[1];
+    var _d = useState(0), popoverWidth = _d[0], setPopoverWidth = _d[1];
+    var triggerRef = useRef(null);
+    var _e = useState(false), isCustom = _e[0], setIsCustom = _e[1];
+    var _f = useState(""), customValue = _f[0], setCustomValue = _f[1];
+    var data = uniqDecoded(values);
+    useEffect(function () {
+        if (triggerRef.current) {
+            setPopoverWidth(triggerRef.current.offsetWidth);
+        }
+    }, [(_b = triggerRef.current) === null || _b === void 0 ? void 0 : _b.offsetWidth]);
+    useEffect(function () {
+        if (!open) {
+            setIsCustom(false);
+            setCustomValue("");
+        }
+    }, [open]);
+    return (_jsx("div", { className: cn("filter-container", label), children: formType === "select" ? (_jsxs(Select, { value: selectedValue !== null && selectedValue !== void 0 ? selectedValue : "", onValueChange: function (val) { return 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 ".concat(label.toLowerCase(), "...")
+                        : selectedValue }), _jsxs(SelectContent, { className: "w-full z-201", children: [_jsx(SelectItem, { value: "clear", children: _jsx("em", { children: "Clear" }) }), data.map(function (option) { return (_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 ".concat(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: "".concat(popoverWidth, "px") }, align: "start", children: [_jsxs(Command, { children: [_jsx(CommandInput, { placeholder: "Search ".concat(label.toLowerCase(), "...") }), _jsx(CommandEmpty, { children: "No results found." }), _jsx(CommandList, { children: data.map(function (option) { return (_jsxs(CommandItem, { value: option, onSelect: function () {
+                                            onChange(option);
+                                            setOpen(false);
+                                        }, children: [_jsx(Check, { className: cn("mr-2 h-4 w-4", selectedValue === option ? "opacity-100" : "opacity-0") }), option] }, option)); }) })] }), others &&
+                            (_jsx("div", { children: isCustom ? (_jsx("div", { className: "border-t px-5 py-2", children: _jsx(Input, { placeholder: "Enter other ".concat(label.toLowerCase()), value: customValue, onChange: function (e) { return setCustomValue(e.target.value); }, onKeyDown: function (e) {
+                                            if (e.key === "Enter" && customValue.trim()) {
+                                                onChange(customValue.trim());
+                                                setOpen(false);
+                                            }
+                                        }, autoFocus: true }) })) : (_jsx("div", { className: "border-t px-10 py-2 cursor-pointer text-sm hover:bg-muted", onClick: function () { return setIsCustom(true); }, children: "Other" })) }))] })] })) }));
+};
+export default Filter;

package/dist/misc/filterBar.d.ts

@@ -0,0 +1,5 @@
+import { TileProps } from "@myrjfa/state/dist/lib/models/tile";
+export default function FilterBar({ tiles }: {
+    tiles: TileProps[];
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=filterBar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"filterBar.d.ts","sourceRoot":"","sources":["../../src/misc/filterBar.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,SAAS,EAAE,MAAM,oCAAoC,CAAC;AAgT/D,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAAE,KAAK,EAAE,EAAE;IAAE,KAAK,EAAE,SAAS,EAAE,CAAA;CAAE,2CAMlE"}

package/dist/misc/filterBar.js

@@ -0,0 +1,196 @@
+'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 __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { retrieveCity, retrieveState } from "@myrjfa/state/dist/lib/utils";
+import { Search, SearchIcon, SlidersHorizontal, X } from "lucide-react";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { Suspense, useEffect, useState } from "react";
+import { Button } from "./button";
+import Filter from "./filter";
+import { Sheet, SheetContent, SheetTitle, SheetTrigger } from "./sheet";
+var filterOptions = [
+    { label: "destination", type: "autoComplete", datatype: "string[]", displayName: "Destination" },
+    { label: "skill", type: "autoComplete", datatype: "string[]", displayName: "Skills" },
+    { label: "rating", type: "select", datatype: "number", displayName: "Rating" },
+];
+function FilterBarComponent(_a) {
+    var tiles = _a.tiles;
+    var searchParams = useSearchParams();
+    var newParams = new URLSearchParams(searchParams);
+    var pathname = usePathname();
+    var router = useRouter();
+    var _b = useState({
+        destination: [],
+        rating: 0,
+        skill: [],
+        category: [],
+        hostRating: 0
+    }), filterParam = _b[0], setFilterParam = _b[1];
+    useEffect(function () {
+        var _a, _b, _c;
+        var destination = ((_a = searchParams.get("destination")) === null || _a === void 0 ? void 0 : _a.split(',')) || [];
+        var rating = parseInt(searchParams.get("rating") || "0", 10);
+        var skill = ((_b = searchParams.get("skill")) === null || _b === void 0 ? void 0 : _b.split(',')) || [];
+        var category = ((_c = searchParams.get("category")) === null || _c === void 0 ? void 0 : _c.split(',')) || [];
+        var hostRating = parseInt(searchParams.get("hostRating") || "0", 10);
+        setFilterParam({
+            destination: destination,
+            rating: rating,
+            skill: skill,
+            category: category,
+            hostRating: hostRating,
+        });
+    }, [searchParams]);
+    var changeMultiParams = function (params) {
+        newParams.set('page', '1');
+        Object.entries(params).forEach(function (_a) {
+            var key = _a[0], value = _a[1];
+            if (Array.isArray(value) && value.length > 0) {
+                newParams.set(key, value.join(','));
+            }
+            else if (value !== undefined && value !== null && value !== '' && value !== 0 && Array.isArray(value) === false) {
+                newParams.set(key, value.toString());
+            }
+            else {
+                newParams.delete(key);
+            }
+        });
+        router.replace("".concat(pathname, "?").concat(newParams.toString()));
+        return newParams;
+    };
+    var filterMap = {
+        destination: (tiles !== null && tiles !== void 0 ? tiles : []).map(function (tile) { return [retrieveState((tile === null || tile === void 0 ? void 0 : tile.location) || ''), retrieveCity((tile === null || tile === void 0 ? void 0 : tile.location) || '')]; }).flat(),
+        skill: (tiles !== null && tiles !== void 0 ? tiles : []).flatMap(function (tile) { return tile.skills || []; }),
+        rating: ["1 star and above", "2 star and above", "3 star and above", "4 star and above", "5 star only"],
+    };
+    var handleFilterChange = function (label, value, datatype) {
+        if (value === null || value === "clear") {
+            setFilterParam(function (prev) {
+                var _a;
+                return (__assign(__assign({}, prev), (_a = {}, _a[label] = datatype.includes('[]') ? [] : (datatype === 'number' ? 0 : ''), _a)));
+            });
+            return;
+        }
+        setFilterParam(function (prev) {
+            var _a, _b;
+            var currentValues = prev[label];
+            var newValue = datatype === 'number' ? Number(value[0]) : value;
+            if (currentValues == newValue || (Array.isArray(currentValues) && currentValues.includes(newValue))) {
+                return prev;
+            }
+            else if (Array.isArray(currentValues)) {
+                // Add if not selected
+                return __assign(__assign({}, prev), (_a = {}, _a[label] = __spreadArray(__spreadArray([], currentValues, true), [newValue], false), _a));
+            }
+            else {
+                return __assign(__assign({}, prev), (_b = {}, _b[label] = newValue, _b));
+            }
+        });
+    };
+    var removeFilter = function (label, value) {
+        setFilterParam(function (prev) {
+            var _a;
+            return (__assign(__assign({}, prev), (_a = {}, _a[label] = Array.isArray(prev[label])
+                ? prev[label].filter(function (v) { return v !== value; })
+                : prev[label] === value ? 0 : '', _a)));
+        });
+    };
+    var _c = useState(false), sheetOpen = _c[0], setSheetOpen = _c[1];
+    var getActiveFilters = function () {
+        var filters = [];
+        Object.entries(filterParam).forEach(function (_a) {
+            var key = _a[0], values = _a[1];
+            if (Array.isArray(values) && values.length > 0) {
+                var option_1 = filterOptions.find(function (opt) { return opt.label === key; });
+                if (option_1) {
+                    values.forEach(function (value) {
+                        filters.push({
+                            label: key,
+                            value: value,
+                            displayName: option_1.displayName
+                        });
+                    });
+                }
+            }
+            else if (!Array.isArray(values) && values !== 0) {
+                var option = filterOptions.find(function (opt) { return opt.label === key; });
+                if (option && values) {
+                    filters.push({
+                        label: key,
+                        value: values,
+                        displayName: option.displayName
+                    });
+                }
+            }
+        });
+        return filters;
+    };
+    var activeFilters = getActiveFilters();
+    var clearAllFilters = function () {
+        var clearedParams = {
+            destination: [],
+            rating: 0,
+            skill: [],
+            category: [],
+            hostRating: 0
+        };
+        setFilterParam(clearedParams);
+        changeMultiParams(clearedParams);
+        setSheetOpen(false);
+    };
+    return (_jsxs("div", { className: "w-4/5 max-w-5xl mx-auto", children: [_jsxs("div", { className: "items-center w-full bg-background shadow-md rounded-full px-4 py-3 md:py-2 flex", children: [filterOptions.slice(0, 3).map(function (_a) {
+                        var _b;
+                        var label = _a.label, type = _a.type, datatype = _a.datatype, displayName = _a.displayName;
+                        return (_jsxs("div", { className: "items-center flex-1 hidden md:flex", children: [_jsx("div", { className: "w-full", children: _jsx(Filter, { label: label, formType: type, selectedValue: datatype.includes('[]')
+                                            ? filterParam[label].length > 0
+                                                ? "".concat(filterParam[label].length, " selected")
+                                                : ''
+                                            : ((_b = filterParam[label]) === null || _b === void 0 ? void 0 : _b.toString()) + ' star or more', values: filterMap[label], onChange: function (value) { return handleFilterChange(label, value, datatype); } }) }), _jsx("div", { className: "h-6 w-px bg-gray-300 mx-4 md:h-8" })] }, label));
+                    }), _jsxs(Sheet, { open: sheetOpen, onOpenChange: setSheetOpen, children: [_jsx(SheetTrigger, { asChild: true, children: _jsxs("button", { className: "flex items-center gap-2 text-sm text-gray-600 cursor-pointer m-auto relative", children: [_jsx(SlidersHorizontal, { size: 16, className: "hidden md:block" }), _jsx(SearchIcon, { size: 16, className: "md:hidden" }), _jsx("div", { className: "md:hidden", children: "Start search..." })] }) }), _jsxs(SheetContent, { side: "top", className: "w-full p-8 z-200 md:items-center", children: [_jsx(SheetTitle, { className: "text-lg font-semibold mb-4", children: "Filters" }), _jsx("div", { className: "space-y-6 md:w-3/5", children: filterOptions.map(function (_a) {
+                                            var _b;
+                                            var label = _a.label, type = _a.type, datatype = _a.datatype, displayName = _a.displayName;
+                                            return (_jsxs("div", { className: "space-y-2", children: [_jsx("label", { className: "text-sm font-medium text-gray-700", children: displayName }), _jsx("div", { className: "bg-gray-50 rounded-lg p-3", children: _jsx(Filter, { label: label, formType: type, selectedValue: datatype.includes('[]')
+                                                                ? filterParam[label].length > 0
+                                                                    ? "".concat(filterParam[label].length, " selected")
+                                                                    : ''
+                                                                : ((_b = filterParam[label]) === null || _b === void 0 ? void 0 : _b.toString()) + ' star or more', values: filterMap[label], onChange: function (value) { return handleFilterChange(label, value, datatype); } }) })] }, label));
+                                        }) }), _jsxs("div", { className: "flex gap-3 mt-6 pt-4 border-t md:w-3/5", children: [_jsx(Button, { variant: "outline", onClick: clearAllFilters, className: "flex-1", children: "Clear All" }), _jsx(Button, { onClick: function () {
+                                                    changeMultiParams(filterParam);
+                                                    setSheetOpen(false);
+                                                }, className: "flex-1", children: "Apply Filters" })] })] })] }), _jsx(Button, { variant: "default", onClick: function () { return changeMultiParams(filterParam); }, className: "ml-4 w-12 h-12 rounded-full items-center justify-center hidden md:flex cursor-pointer", children: _jsx(Search, { size: 20 }) })] }), activeFilters.length > 0 && (_jsx("div", { className: "max-w-5xl mx-auto mt-4", children: _jsxs("div", { className: "flex flex-wrap gap-2", children: [activeFilters.map(function (filter, index) { return (_jsxs("div", { className: "inline-flex items-center gap-1 bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm border border-blue-200", children: [_jsxs("span", { className: "font-medium", children: [filter.displayName, ":"] }), _jsx("span", { children: typeof filter.value === 'number'
+                                        ? "".concat(filter.value, " star or more")
+                                        : filter.value }), _jsx("button", { onClick: function () {
+                                        var _a;
+                                        removeFilter(filter.label, filter.value);
+                                        // Auto-apply the change
+                                        var newParams = __assign(__assign({}, filterParam), (_a = {}, _a[filter.label] = Array.isArray(filterParam[filter.label])
+                                            ? filterParam[filter.label].filter(function (v) { return v !== filter.value; })
+                                            : 0, _a));
+                                        changeMultiParams(newParams);
+                                    }, className: "ml-1 hover:bg-blue-200 rounded-full p-1 transition-colors", children: _jsx(X, { size: 12 }) })] }, "".concat(filter.label, "-").concat(filter.value, "-").concat(index))); }), activeFilters.length > 0 && (_jsxs("button", { onClick: function () {
+                                clearAllFilters();
+                            }, className: "inline-flex items-center gap-1 bg-gray-100 text-gray-600 px-3 py-1 rounded-full text-sm border border-gray-200 hover:bg-gray-200 transition-colors", children: ["Clear All", _jsx(X, { size: 12 })] }))] }) }))] }));
+}
+export default function FilterBar(_a) {
+    var tiles = _a.tiles;
+    return (_jsx(Suspense, { fallback: _jsx("div", { className: "w-full h-screen flex items-center justify-center", children: "Loading..." }), children: _jsx(FilterBarComponent, { tiles: tiles }) }));
+}

package/dist/misc/form.d.ts

@@ -0,0 +1,25 @@
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { Slot } from "@radix-ui/react-slot";
+import * as React from "react";
+import { type ControllerProps, type FieldPath, type FieldValues } from "react-hook-form";
+declare const Form: <TFieldValues extends FieldValues, TContext = any, TTransformedValues = TFieldValues>(props: import("react-hook-form").FormProviderProps<TFieldValues, TContext, TTransformedValues>) => React.JSX.Element;
+declare const FormField: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ ...props }: ControllerProps<TFieldValues, TName>) => import("react/jsx-runtime").JSX.Element;
+declare const useFormField: () => {
+    invalid: boolean;
+    isDirty: boolean;
+    isTouched: boolean;
+    isValidating: boolean;
+    error?: import("react-hook-form").FieldError;
+    id: string;
+    name: string;
+    formItemId: string;
+    formDescriptionId: string;
+    formMessageId: string;
+};
+declare function FormItem({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function FormLabel({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare function FormControl({ ...props }: React.ComponentProps<typeof Slot>): import("react/jsx-runtime").JSX.Element;
+declare function FormDescription({ className, ...props }: React.ComponentProps<"p">): import("react/jsx-runtime").JSX.Element;
+declare function FormMessage({ className, ...props }: React.ComponentProps<"p">): import("react/jsx-runtime").JSX.Element | null;
+export { useFormField, Form, FormItem, FormLabel, FormControl, FormDescription, FormMessage, FormField, };
+//# sourceMappingURL=form.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"form.d.ts","sourceRoot":"","sources":["../../src/misc/form.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,cAAc,MAAM,uBAAuB,CAAA;AACvD,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAA;AAE3C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAEL,KAAK,eAAe,EACpB,KAAK,SAAS,EACd,KAAK,WAAW,EAIjB,MAAM,iBAAiB,CAAA;AAIxB,QAAA,MAAM,IAAI,4MAAe,CAAA;AAazB,QAAA,MAAM,SAAS,GACb,YAAY,SAAS,WAAW,GAAG,WAAW,EAC9C,KAAK,SAAS,SAAS,CAAC,YAAY,CAAC,GAAG,SAAS,CAAC,YAAY,CAAC,EAC/D,cAEC,eAAe,CAAC,YAAY,EAAE,KAAK,CAAC,4CAMtC,CAAA;AAED,QAAA,MAAM,YAAY;;;;;;;;;;;CAqBjB,CAAA;AAUD,iBAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAYrE;AAED,iBAAS,SAAS,CAAC,EACjB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,IAAI,CAAC,2CAYlD;AAED,iBAAS,WAAW,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,2CAgBnE;AAED,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,2CAW1E;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,kDAkBtE;AAED,OAAO,EACL,YAAY,EACZ,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,WAAW,EACX,eAAe,EACf,WAAW,EACX,SAAS,GACV,CAAA"}

package/dist/misc/form.js

@@ -0,0 +1,81 @@
+"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 { Slot } from "@radix-ui/react-slot";
+import { cn } from "@myrjfa/state/dist/lib/utils";
+import * as React from "react";
+import { Controller, FormProvider, useFormContext, useFormState, } from "react-hook-form";
+import { Label } from "./label";
+var Form = FormProvider;
+var FormFieldContext = React.createContext({});
+var FormField = function (_a) {
+    var props = __rest(_a, []);
+    return (_jsx(FormFieldContext.Provider, { value: { name: props.name }, children: _jsx(Controller, __assign({}, props)) }));
+};
+var useFormField = function () {
+    var fieldContext = React.useContext(FormFieldContext);
+    var itemContext = React.useContext(FormItemContext);
+    var getFieldState = useFormContext().getFieldState;
+    var formState = useFormState({ name: fieldContext.name });
+    var fieldState = getFieldState(fieldContext.name, formState);
+    if (!fieldContext) {
+        throw new Error("useFormField should be used within <FormField>");
+    }
+    var id = itemContext.id;
+    return __assign({ id: id, name: fieldContext.name, formItemId: "".concat(id, "-form-item"), formDescriptionId: "".concat(id, "-form-item-description"), formMessageId: "".concat(id, "-form-item-message") }, fieldState);
+};
+var FormItemContext = React.createContext({});
+function FormItem(_a) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    var id = React.useId();
+    return (_jsx(FormItemContext.Provider, { value: { id: id }, children: _jsx("div", __assign({ "data-slot": "form-item", className: cn("grid gap-2", className) }, props)) }));
+}
+function FormLabel(_a) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    var _b = useFormField(), error = _b.error, formItemId = _b.formItemId;
+    return (_jsx(Label, __assign({ "data-slot": "form-label", "data-error": !!error, className: cn("data-[error=true]:text-destructive-foreground", className), htmlFor: formItemId }, props)));
+}
+function FormControl(_a) {
+    var props = __rest(_a, []);
+    var _b = useFormField(), error = _b.error, formItemId = _b.formItemId, formDescriptionId = _b.formDescriptionId, formMessageId = _b.formMessageId;
+    return (_jsx(Slot, __assign({ "data-slot": "form-control", id: formItemId, "aria-describedby": !error
+            ? "".concat(formDescriptionId)
+            : "".concat(formDescriptionId, " ").concat(formMessageId), "aria-invalid": !!error }, props)));
+}
+function FormDescription(_a) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    var formDescriptionId = useFormField().formDescriptionId;
+    return (_jsx("p", __assign({ "data-slot": "form-description", id: formDescriptionId, className: cn("text-muted-foreground text-sm", className) }, props)));
+}
+function FormMessage(_a) {
+    var _b;
+    var className = _a.className, props = __rest(_a, ["className"]);
+    var _c = useFormField(), error = _c.error, formMessageId = _c.formMessageId;
+    var body = error ? String((_b = error === null || error === void 0 ? void 0 : error.message) !== null && _b !== void 0 ? _b : "") : props.children;
+    if (!body) {
+        return null;
+    }
+    return (_jsx("p", __assign({ "data-slot": "form-message", id: formMessageId, className: cn("text-destructive-foreground text-sm", className) }, props, { children: body })));
+}
+export { useFormField, Form, FormItem, FormLabel, FormControl, FormDescription, FormMessage, FormField, };

package/dist/misc/input.d.ts

@@ -0,0 +1,4 @@
+import * as React from "react";
+declare function Input({ className, type, ...props }: React.ComponentProps<"input">): import("react/jsx-runtime").JSX.Element;
+export { Input };
+//# sourceMappingURL=input.d.ts.map

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

@@ -0,0 +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"}

package/dist/misc/input.js

@@ -0,0 +1,29 @@
+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 { cn } from "@myrjfa/state/dist/lib/utils";
+function Input(_a) {
+    var className = _a.className, type = _a.type, props = __rest(_a, ["className", "type"]);
+    return (_jsx("input", __assign({ 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)));
+}
+export { Input };

package/dist/misc/label.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"label.d.ts","sourceRoot":"","sources":["../../src/misc/label.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,cAAc,MAAM,uBAAuB,CAAA;AAIvD,iBAAS,KAAK,CAAC,EACb,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,IAAI,CAAC,2CAWlD;AAED,OAAO,EAAE,KAAK,EAAE,CAAA"}

package/dist/misc/label.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 LabelPrimitive from "@radix-ui/react-label";
+import { cn } from "@myrjfa/state/dist/lib/utils";
+function Label(_a) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (_jsx(LabelPrimitive.Root, __assign({ "data-slot": "label", className: cn("flex items-center gap-2 leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50", className) }, props)));
+}
+export { Label };

package/dist/misc/line-carousel.d.ts

@@ -0,0 +1,9 @@
+import { LucideProps } from "lucide-react";
+import { ForwardRefExoticComponent, RefAttributes } from "react";
+export default function LineCarousel({ skillsData }: {
+    skillsData: {
+        icon: ForwardRefExoticComponent<Omit<LucideProps, "ref"> & RefAttributes<SVGSVGElement>>;
+        title: string;
+    }[];
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=line-carousel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"line-carousel.d.ts","sourceRoot":"","sources":["../../src/misc/line-carousel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAC3C,OAAO,EAAE,yBAAyB,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAEjE,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EAAE,UAAU,EAAE,EAAE;IACjD,UAAU,EAAE;QACR,IAAI,EAAE,yBAAyB,CAAC,IAAI,CAAC,WAAW,EAAE,KAAK,CAAC,GAAG,aAAa,CAAC,aAAa,CAAC,CAAC,CAAC;QACzF,KAAK,EAAE,MAAM,CAAC;KACjB,EAAE,CAAA;CACN,2CA6BA"}

package/dist/misc/line-carousel.js

@@ -0,0 +1,15 @@
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export default function LineCarousel(_a) {
+    var skillsData = _a.skillsData;
+    var loopedSkills = __spreadArray(__spreadArray(__spreadArray([], skillsData, true), skillsData, true), skillsData, true);
+    return (_jsxs("section", { className: "relative w-full pt-10 pb-5 bg-background text-white", children: [_jsx("h2", { className: "text-2xl font-bold text-left mx-10 md:mx-15 lg:mx-25 tracking-tight text-foreground", children: "Popular Skills Offered" }), _jsx("p", { className: "text-muted-foreground mx-10 md:mx-15 lg:mx-25 mb-10", children: "Discover In-Demand Creative Skills for the Modern World." }), _jsxs("div", { className: "relative w-full overflow-hidden", children: [_jsx("div", { className: "absolute inset-y-0 left-0 w-1/4 bg-gradient-to-r from-background to-transparent z-10" }), _jsx("div", { className: "absolute inset-y-0 right-0 w-1/4 bg-gradient-to-l from-background to-transparent z-10" }), _jsx("div", { className: "flex animate-scroll items-center space-x-10", children: loopedSkills.map(function (item, i) { return (_jsxs("div", { className: "flex items-center space-x-3 px-5 text-lg", children: [_jsx(item.icon, { className: "w-6 h-6 text-foreground" }), _jsx("span", { className: "text-muted-foreground font-semibold", children: item.title })] }, i)); }) })] })] }));
+}