@myrjfa/ui 0.3.1

package/dist/misc/filterBar.js

@@ -0,0 +1,384 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { retrieveCity, retrieveState } from "@myrjfa/state/dist/lib/utils";
+import { INDIAN_CITIES } from "@myrjfa/state/dist/lib/models/props";
+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 { Input } from "./input";
+import { Sheet, SheetContent, SheetTitle, SheetTrigger } from "./sheet";
+import { Slider } from "./slider";
+// Default filter options (backward compatible)
+const defaultFilterOptions = [
+    { label: "destination", type: "autoComplete", datatype: "string[]", displayName: "Destination", deriveFromTiles: 'location', visibility: 'bar' },
+    { label: "skill", type: "autoComplete", datatype: "string[]", displayName: "Skills", deriveFromTiles: 'skills', visibility: 'bar' },
+    { label: "rating", type: "select", datatype: "number", displayName: "Rating", visibility: 'expanded' },
+];
+const INDIAN_CITY_SET = new Set(INDIAN_CITIES.map((city) => city.trim().toLowerCase()));
+function retrieveScopedCity(location) {
+    var _a;
+    const parts = location.split(",").map((part) => part.trim()).filter(Boolean);
+    if (parts.length > 1) {
+        const lastPart = ((_a = parts[parts.length - 1]) === null || _a === void 0 ? void 0 : _a.toLowerCase()) || "";
+        if (INDIAN_CITY_SET.has(lastPart))
+            return lastPart;
+    }
+    return retrieveCity(location);
+}
+function FilterBarComponent({ tiles, filterConfig = defaultFilterOptions, hero }) {
+    const searchParams = useSearchParams();
+    const pathname = usePathname();
+    const router = useRouter();
+    // Initialize filter state from config
+    const getInitialFilterState = () => {
+        const state = {};
+        filterConfig.forEach(opt => {
+            if (opt.datatype === 'string[]') {
+                state[opt.label] = opt.defaultValue || [];
+            }
+            else if (opt.datatype === 'number') {
+                state[opt.label] = opt.defaultValue || 0;
+            }
+            else if (opt.datatype === 'range') {
+                state[opt.label] = opt.defaultValue || { min: 0, max: 100 };
+            }
+            else {
+                state[opt.label] = opt.defaultValue || '';
+            }
+        });
+        return state;
+    };
+    const [filterParam, setFilterParam] = useState(getInitialFilterState);
+    useEffect(() => {
+        const newState = {};
+        filterConfig.forEach(opt => {
+            const param = searchParams.get(opt.label);
+            if (opt.datatype === 'string[]') {
+                newState[opt.label] = (param === null || param === void 0 ? void 0 : param.split(',').filter(Boolean)) || opt.defaultValue || [];
+            }
+            else if (opt.datatype === 'number') {
+                newState[opt.label] = parseInt(param || "0", 10) || opt.defaultValue || 0;
+            }
+            else if (opt.datatype === 'range') {
+                const minParam = searchParams.get(`${opt.label}Min`);
+                const maxParam = searchParams.get(`${opt.label}Max`);
+                const defaultRange = opt.defaultValue || { min: 0, max: 100 };
+                newState[opt.label] = {
+                    min: minParam ? parseInt(minParam, 10) : defaultRange.min,
+                    max: maxParam ? parseInt(maxParam, 10) : defaultRange.max
+                };
+            }
+            else {
+                newState[opt.label] = param || opt.defaultValue || '';
+            }
+        });
+        setFilterParam(newState);
+    }, [searchParams, filterConfig]);
+    const getFiltersFromSearchParams = () => {
+        const state = {};
+        filterConfig.forEach(opt => {
+            const param = searchParams.get(opt.label);
+            if (opt.datatype === 'string[]') {
+                state[opt.label] = (param === null || param === void 0 ? void 0 : param.split(',').filter(Boolean)) || opt.defaultValue || [];
+            }
+            else if (opt.datatype === 'number') {
+                state[opt.label] = parseInt(param || "0", 10) || opt.defaultValue || 0;
+            }
+            else if (opt.datatype === 'range') {
+                const minParam = searchParams.get(`${opt.label}Min`);
+                const maxParam = searchParams.get(`${opt.label}Max`);
+                const defaultRange = opt.defaultValue || { min: 0, max: 100 };
+                state[opt.label] = {
+                    min: minParam ? parseInt(minParam, 10) : defaultRange.min,
+                    max: maxParam ? parseInt(maxParam, 10) : defaultRange.max
+                };
+            }
+            else {
+                state[opt.label] = param || opt.defaultValue || '';
+            }
+        });
+        return state;
+    };
+    const changeMultiParams = (params, options) => {
+        const newParams = new URLSearchParams(searchParams);
+        newParams.set('page', '1');
+        Object.entries(params).forEach(([key, value]) => {
+            if (typeof value === 'object' && 'min' in value && 'max' in value) {
+                // Range type - only set if different from default
+                const config = filterConfig.find(f => f.label === key);
+                const defaultRange = (config === null || config === void 0 ? void 0 : config.defaultValue) || { min: 0, max: 100 };
+                if (value.min !== defaultRange.min || value.max !== defaultRange.max) {
+                    newParams.set(`${key}Min`, value.min.toString());
+                    newParams.set(`${key}Max`, value.max.toString());
+                }
+                else {
+                    newParams.delete(`${key}Min`);
+                    newParams.delete(`${key}Max`);
+                }
+            }
+            else if (Array.isArray(value) && value.length > 0) {
+                newParams.set(key, value.join(','));
+            }
+            else if (value !== undefined && value !== null && value !== '' && value !== 0 && !Array.isArray(value)) {
+                newParams.set(key, value.toString());
+            }
+            else {
+                newParams.delete(key);
+                newParams.delete(`${key}Min`);
+                newParams.delete(`${key}Max`);
+            }
+        });
+        router.replace(`${pathname}?${newParams.toString()}`);
+    };
+    // Get filter values based on config
+    const getFilterValues = (opt) => {
+        if (opt.deriveFromTiles === 'opportunityType' && opt.options) {
+            // For opportunityType, dynamically filter options based on what types exist in tiles
+            const availableTypes = new Set((tiles !== null && tiles !== void 0 ? tiles : []).map(tile => tile.opportunityType || 'volunteer'));
+            return opt.options
+                .filter(o => availableTypes.has(o.value))
+                .map(o => o.label);
+        }
+        if (opt.options) {
+            return opt.options.map(o => o.label);
+        }
+        if (opt.deriveFromTiles === 'location') {
+            const tileLocations = (tiles !== null && tiles !== void 0 ? tiles : [])
+                .map(tile => opt.locationScope === 'city'
+                ? retrieveScopedCity((tile === null || tile === void 0 ? void 0 : tile.location) || '')
+                : [retrieveState((tile === null || tile === void 0 ? void 0 : tile.location) || ''), retrieveCity((tile === null || tile === void 0 ? void 0 : tile.location) || '')])
+                .flat()
+                .filter(Boolean);
+            return Array.from(new Set([...tileLocations, ...INDIAN_CITIES]));
+        }
+        if (opt.deriveFromTiles === 'skills') {
+            return Array.from(new Set((tiles !== null && tiles !== void 0 ? tiles : []).flatMap(tile => tile.skills || [])));
+        }
+        if (opt.label === 'rating') {
+            return ["1 star and above", "2 star and above", "3 star and above", "4 star and above", "5 star only"];
+        }
+        return tiles.map(tile => tile[`${opt.deriveFromTiles}`]);
+    };
+    const handleFilterChange = (label, value, datatype, options) => {
+        if (value === null || value === "clear") {
+            const config = filterConfig.find(f => f.label === label);
+            setFilterParam(prev => ({
+                ...prev,
+                [label]: datatype.includes('[]') ? [] : (datatype === 'number' ? 0 : ((config === null || config === void 0 ? void 0 : config.defaultValue) || ''))
+            }));
+            return;
+        }
+        // For select with options, convert label to value
+        let actualValue = value;
+        if (options) {
+            const opt = options.find(o => decodeURIComponent(o.label.trim().toLowerCase()) === value);
+            if (opt)
+                actualValue = decodeURIComponent(opt.value.trim().toLowerCase());
+        }
+        setFilterParam(prev => {
+            const currentValues = prev[label];
+            const newValue = datatype === 'number' ? Number(value[0]) : actualValue;
+            if (currentValues == newValue || (Array.isArray(currentValues) && currentValues.includes(newValue))) {
+                return prev;
+            }
+            else if (Array.isArray(currentValues)) {
+                return { ...prev, [label]: [...currentValues, newValue] };
+            }
+            else {
+                return { ...prev, [label]: newValue };
+            }
+        });
+    };
+    const handleRangeChange = (label, field, value) => {
+        setFilterParam(prev => {
+            const current = prev[label];
+            return {
+                ...prev,
+                [label]: { ...current, [field]: value }
+            };
+        });
+    };
+    const [sheetOpen, setSheetOpen] = useState(false);
+    const [isApplying, setIsApplying] = useState(false);
+    // Get current opportunity type for conditional filters
+    const currentType = filterParam['type'] || 'volunteer';
+    // Filter configs based on showForTypes
+    const getVisibleConfigs = (configs) => {
+        return configs.filter(opt => {
+            if (!opt.showForTypes || opt.showForTypes.length === 0)
+                return true;
+            return opt.showForTypes.includes(currentType);
+        });
+    };
+    const getActiveFilters = (state) => {
+        const filters = [];
+        Object.entries(state).forEach(([key, values]) => {
+            const opt = filterConfig.find(o => o.label === key);
+            if (!opt)
+                return;
+            if (typeof values === 'object' && 'min' in values && 'max' in values) {
+                // Range filter
+                const defaultRange = opt.defaultValue || { min: 0, max: 100 };
+                if (values.min !== defaultRange.min || values.max !== defaultRange.max) {
+                    filters.push({
+                        label: key,
+                        value: `${values.min}-${values.max} ${opt.rangeUnit || ''}`,
+                        displayName: opt.displayName,
+                        isRange: true
+                    });
+                }
+            }
+            else if (Array.isArray(values) && values.length > 0) {
+                values.forEach(value => {
+                    filters.push({ label: key, value, displayName: opt.displayName });
+                });
+            }
+            else if (!Array.isArray(values) && values !== 0 && values !== '' && values !== opt.defaultValue) {
+                // For select with options, show label not value
+                let displayValue = values;
+                if (opt.options) {
+                    const found = opt.options.find(o => o.value === values);
+                    if (found)
+                        displayValue = found.label;
+                }
+                filters.push({ label: key, value: displayValue, displayName: opt.displayName });
+            }
+        });
+        return filters;
+    };
+    const appliedFilterState = getFiltersFromSearchParams();
+    const activeFilters = getActiveFilters(appliedFilterState);
+    const visibleActiveFilters = activeFilters.filter((filter) => {
+        const config = filterConfig.find((opt) => opt.label === filter.label);
+        return !(config === null || config === void 0 ? void 0 : config.hideActiveBadge);
+    });
+    const hasActiveFilters = activeFilters.length > 0;
+    const themeStyles = {
+        sand: "border-[#e8dccb] bg-[linear-gradient(135deg,#f7efe3_0%,#efe2cd_52%,#e6d4bc_100%)]",
+        emerald: "border-emerald-200/70 bg-[linear-gradient(135deg,#ecfdf5_0%,#d1fae5_55%,#ecfeff_100%)]",
+        sunset: "border-orange-200/70 bg-[linear-gradient(135deg,#fff7ed_0%,#ffedd5_50%,#fef3c7_100%)]",
+        slate: "border-slate-700/70 bg-[linear-gradient(135deg,#0f172a_0%,#111827_55%,#1e293b_100%)]",
+        ocean: "border-sky-200/70 bg-[linear-gradient(135deg,#eff6ff_0%,#dbeafe_52%,#ecfeff_100%)]",
+    };
+    const currentTheme = themeStyles[(hero === null || hero === void 0 ? void 0 : hero.theme) || 'emerald'];
+    const expandedSectionClasses = {
+        sand: "border-b border-[#e8dccb] bg-[linear-gradient(135deg,#f7efe3_0%,#efe2cd_52%,#e6d4bc_100%)]",
+        emerald: "border-b border-emerald-100 bg-[linear-gradient(135deg,#effcf5_0%,#dcfce7_48%,#ecfeff_100%)]",
+        sunset: "border-b border-orange-100 bg-[linear-gradient(135deg,#fff7ed_0%,#ffedd5_50%,#fef3c7_100%)]",
+        slate: "border-b border-slate-800 bg-[linear-gradient(135deg,#0f172a_0%,#172554_52%,#1e1b4b_100%)]",
+        ocean: "border-b border-sky-100 bg-[linear-gradient(135deg,#f0f9ff_0%,#dbeafe_50%,#ecfeff_100%)]",
+    };
+    const applyFilters = () => {
+        setIsApplying(true);
+        changeMultiParams(filterParam);
+        setSheetOpen(false);
+        setTimeout(() => setIsApplying(false), 420);
+    };
+    const clearAllFilters = () => {
+        const clearedParams = getInitialFilterState();
+        setFilterParam(clearedParams);
+        changeMultiParams(clearedParams);
+        setSheetOpen(false);
+    };
+    const renderFilterInput = (opt) => {
+        var _a, _b, _c, _d, _e, _f, _g;
+        if (opt.type === 'text') {
+            const value = filterParam[opt.label] || '';
+            return (_jsx(Input, { value: value, onChange: (e) => setFilterParam(prev => ({ ...prev, [opt.label]: e.target.value })), placeholder: `Search ${opt.displayName.toLowerCase()}...`, className: "w-full bg-transparent border-none shadow-none px-0 focus-visible:ring-0" }));
+        }
+        if (opt.type === 'range') {
+            const rangeValue = filterParam[opt.label];
+            const defaultRange = opt.defaultValue || { min: 0, max: 100 };
+            const minVal = (_a = opt.rangeMin) !== null && _a !== void 0 ? _a : defaultRange.min;
+            const maxVal = (_b = opt.rangeMax) !== null && _b !== void 0 ? _b : defaultRange.max;
+            const step = (_c = opt.rangeStep) !== null && _c !== void 0 ? _c : 1;
+            // Number inputs mode
+            if (opt.rangeInputType === 'number') {
+                // Inline style to hide number input spinners
+                const noSpinnerStyle = {
+                    MozAppearance: 'textfield',
+                    WebkitAppearance: 'none',
+                    appearance: 'textfield'
+                };
+                return (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("input", { type: "number", placeholder: "Min", value: (rangeValue === null || rangeValue === void 0 ? void 0 : rangeValue.min) === undefined || (rangeValue === null || rangeValue === void 0 ? void 0 : rangeValue.min) === null || Number.isNaN(rangeValue === null || rangeValue === void 0 ? void 0 : rangeValue.min) ? '' : rangeValue.min, min: minVal, max: maxVal, onChange: (e) => {
+                                const inputVal = e.target.value;
+                                const val = inputVal === '' ? NaN : parseInt(inputVal);
+                                setFilterParam(prev => ({
+                                    ...prev,
+                                    [opt.label]: { ...prev[opt.label], min: val }
+                                }));
+                            }, onWheel: (e) => e.currentTarget.blur(), style: noSpinnerStyle, className: "w-20 px-2 py-1 border rounded text-sm [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none" }), _jsx("span", { className: "text-gray-500", children: "to" }), _jsx("input", { type: "number", placeholder: "Max", value: (rangeValue === null || rangeValue === void 0 ? void 0 : rangeValue.max) === undefined || (rangeValue === null || rangeValue === void 0 ? void 0 : rangeValue.max) === null || Number.isNaN(rangeValue === null || rangeValue === void 0 ? void 0 : rangeValue.max) ? '' : rangeValue.max, min: minVal, max: maxVal, onChange: (e) => {
+                                const inputVal = e.target.value;
+                                const val = inputVal === '' ? NaN : parseInt(inputVal);
+                                setFilterParam(prev => ({
+                                    ...prev,
+                                    [opt.label]: { ...prev[opt.label], max: val }
+                                }));
+                            }, onWheel: (e) => e.currentTarget.blur(), style: noSpinnerStyle, className: "w-20 px-2 py-1 border rounded text-sm [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none" }), opt.rangeUnit && _jsx("span", { className: "text-sm text-gray-500", children: opt.rangeUnit })] }));
+            }
+            // Slider mode (default)
+            return (_jsxs("div", { className: "flex flex-col gap-2 w-full", children: [_jsxs("div", { className: "flex justify-between text-sm text-gray-600", children: [_jsxs("span", { children: [(_d = rangeValue === null || rangeValue === void 0 ? void 0 : rangeValue.min) !== null && _d !== void 0 ? _d : minVal, " ", opt.rangeUnit] }), _jsxs("span", { children: [(_e = rangeValue === null || rangeValue === void 0 ? void 0 : rangeValue.max) !== null && _e !== void 0 ? _e : maxVal, " ", opt.rangeUnit] })] }), _jsx(Slider, { min: minVal, max: maxVal, step: step, value: [(_f = rangeValue === null || rangeValue === void 0 ? void 0 : rangeValue.min) !== null && _f !== void 0 ? _f : minVal, (_g = rangeValue === null || rangeValue === void 0 ? void 0 : rangeValue.max) !== null && _g !== void 0 ? _g : maxVal], onValueChange: (values) => {
+                            setFilterParam(prev => {
+                                var _a, _b;
+                                return ({
+                                    ...prev,
+                                    [opt.label]: { min: (_a = values[0]) !== null && _a !== void 0 ? _a : minVal, max: (_b = values[1]) !== null && _b !== void 0 ? _b : maxVal }
+                                });
+                            });
+                        }, className: "w-full" })] }));
+        }
+        const selectedValue = (() => {
+            const val = filterParam[opt.label];
+            if (opt.datatype.includes('[]')) {
+                const arr = val;
+                return arr.length > 0 ? `${arr.length} selected` : '';
+            }
+            if (opt.datatype === 'number') {
+                return val ? `${val} star or more` : '';
+            }
+            // For select type, show label not value
+            if (opt.options && val) {
+                const found = opt.options.find(o => o.value === val);
+                return (found === null || found === void 0 ? void 0 : found.label) || val.toString();
+            }
+            return (val === null || val === void 0 ? void 0 : val.toString()) || '';
+        })();
+        return (_jsx(Filter, { label: opt.label, formType: opt.type === 'select' ? 'select' : 'autoComplete', selectedValue: selectedValue, values: getFilterValues(opt), onChange: (value) => handleFilterChange(opt.label, value, opt.datatype, opt.options) }));
+    };
+    // Separate bar filters from expanded filters
+    const visibleConfigs = getVisibleConfigs(filterConfig);
+    const barFilters = visibleConfigs.filter(f => f.visibility !== 'expanded');
+    const expandedFilters = visibleConfigs.filter(f => f.visibility === 'expanded');
+    const filtersCard = (_jsx("div", { className: `rounded-[1.75rem] border border-white/70 bg-white/92 shadow-lg backdrop-blur transition-all duration-500 ${hasActiveFilters ? 'p-3 sm:p-3' : 'p-4'}`, children: _jsxs("div", { className: "flex w-full flex-col gap-3 md:flex-row md:items-center", children: [barFilters.slice(0, 3).map((opt, index) => (_jsxs("div", { className: "hidden md:flex min-w-0 flex-1 items-center", children: [_jsx("div", { className: "w-full", children: renderFilterInput(opt) }), index < Math.min(barFilters.length, 3) - 1 ? (_jsx("div", { className: "mx-4 hidden h-10 w-px bg-slate-200 md:block" })) : null] }, opt.label))), _jsxs(Sheet, { open: sheetOpen, onOpenChange: setSheetOpen, children: [_jsx(SheetTrigger, { asChild: true, children: _jsxs("button", { className: "flex h-12 items-center justify-center gap-2 rounded-2xl border border-slate-200 bg-slate-50 px-4 text-sm font-semibold text-slate-600 transition hover:border-slate-300 hover:bg-slate-100 md:min-w-[10rem]", children: [_jsx(SlidersHorizontal, { size: 16, className: "hidden md:block" }), _jsx(SearchIcon, { size: 16, className: "md:hidden" }), _jsx("span", { className: "md:hidden", children: "Start search..." }), _jsx("span", { className: "hidden md:inline", children: expandedFilters.length > 0 ? `+${expandedFilters.length} more` : 'More filters' })] }) }), _jsxs(SheetContent, { side: "bottom", className: "z-[200] max-h-[88vh] overflow-hidden rounded-t-[2rem] border-t border-slate-200 bg-white p-0 shadow-2xl md:inset-x-1/2 md:bottom-auto md:top-1/2 md:h-[min(86vh,820px)] md:w-[min(960px,calc(100vw-3rem))] md:-translate-x-1/2 md:-translate-y-1/2 md:rounded-[2rem] md:border", children: [_jsx("div", { className: "flex items-center justify-center border-b border-slate-200 px-5 py-4 md:px-8", children: _jsx(SheetTitle, { className: "text-lg font-black tracking-tight text-slate-950", children: "Filters" }) }), _jsx("div", { className: "flex-1 overflow-y-auto px-5 py-5 md:px-10 md:py-7", children: _jsx("div", { className: "mx-auto max-w-3xl divide-y divide-slate-100", children: visibleConfigs
+                                            .filter(opt => !opt.groupWith)
+                                            .map((opt) => {
+                                            const groupedFilter = visibleConfigs.find(f => f.groupWith === opt.label);
+                                            if (groupedFilter) {
+                                                return (_jsxs("section", { className: "space-y-4 py-6 first:pt-0", children: [_jsxs("label", { className: "block text-base font-black text-slate-900", children: [groupedFilter.displayName, " & ", opt.displayName] }), _jsxs("div", { className: "grid gap-3 rounded-3xl border border-slate-200 bg-slate-50/70 p-3 sm:grid-cols-[8rem_minmax(0,1fr)]", children: [_jsx("div", { children: renderFilterInput(groupedFilter) }), _jsx("div", { children: renderFilterInput(opt) })] })] }, opt.label));
+                                            }
+                                            return (_jsxs("section", { className: "space-y-4 py-6 first:pt-0", children: [_jsx("label", { className: "block text-base font-black text-slate-900", children: opt.displayName }), _jsx("div", { className: "rounded-3xl border border-slate-200 bg-slate-50/70 p-3", children: renderFilterInput(opt) })] }, opt.label));
+                                        }) }) }), _jsxs("div", { className: "sticky bottom-0 flex gap-3 border-t border-slate-200 bg-white/95 px-5 py-4 shadow-[0_-18px_45px_-30px_rgba(15,23,42,0.45)] backdrop-blur md:px-10", children: [_jsx(Button, { variant: "outline", onClick: clearAllFilters, className: "h-12 flex-1 rounded-2xl border-slate-300 font-black", children: "Clear All" }), _jsx(Button, { onClick: applyFilters, className: "h-12 flex-1 rounded-2xl font-black shadow-lg shadow-primary/20", children: "Apply Filters" })] })] })] }), _jsxs(Button, { variant: "default", onClick: applyFilters, className: `h-12 rounded-2xl px-5 text-sm font-black transition duration-300 md:min-w-[8.5rem] ${isApplying ? 'scale-95 shadow-[0_0_0_10px_rgba(16,185,129,0.14)]' : 'hover:scale-[1.02] shadow-lg shadow-primary/25'}`, children: [_jsx(Search, { size: 18, className: "mr-2" }), "Search"] })] }) }));
+    return hasActiveFilters ? (_jsx("div", { className: "sticky top-16 z-30 mb-10 mt-2 w-full px-4 transition-all duration-500", children: _jsx("div", { className: `mx-auto w-full max-w-6xl overflow-hidden rounded-[2rem] border py-3 shadow-[0_28px_70px_-34px_rgba(15,23,42,0.28)] transition-all duration-500 ${currentTheme}`, children: _jsxs("div", { className: "mx-auto w-full max-w-5xl px-4 sm:px-6", children: [filtersCard, visibleActiveFilters.length > 0 && (_jsx("div", { className: "mt-4", children: _jsxs("div", { className: "flex flex-wrap gap-2", children: [visibleActiveFilters.map((filter, index) => (_jsxs("div", { className: "inline-flex items-center gap-1 rounded-full border border-white/70 bg-white/88 px-3 py-1 text-sm text-slate-700 shadow-sm", children: [_jsxs("span", { className: "font-medium", children: [filter.displayName, ":"] }), _jsx("span", { children: typeof filter.value === 'number' && !filter.isRange
+                                                ? `${filter.value} star or more`
+                                                : filter.value }), _jsx("button", { onClick: () => {
+                                                const newState = { ...filterParam };
+                                                if (filter.isRange) {
+                                                    const config = filterConfig.find(f => f.label === filter.label);
+                                                    newState[filter.label] = (config === null || config === void 0 ? void 0 : config.defaultValue) || { min: 0, max: 100 };
+                                                }
+                                                else if (Array.isArray(filterParam[filter.label])) {
+                                                    newState[filter.label] = filterParam[filter.label].filter(v => v !== filter.value);
+                                                }
+                                                else {
+                                                    const config = filterConfig.find(f => f.label === filter.label);
+                                                    newState[filter.label] = (config === null || config === void 0 ? void 0 : config.defaultValue) || 0;
+                                                }
+                                                setFilterParam(newState);
+                                                changeMultiParams(newState);
+                                            }, className: "ml-1 rounded-full p-1 transition-colors hover:bg-slate-100", children: _jsx(X, { size: 12 }) })] }, `${filter.label}-${filter.value}-${index}`))), _jsx("button", { onClick: clearAllFilters, className: "inline-flex items-center gap-1 rounded-full border border-red-600 bg-white/88 px-3 py-1 text-sm text-slate-600 shadow-sm transition-colors hover:bg-red-200", children: "Clear All" })] }) }))] }) }) })) : (_jsxs("div", { className: `relative w-full overflow-hidden px-4 pb-10 pt-20 transition-all duration-500 ${expandedSectionClasses[(hero === null || hero === void 0 ? void 0 : hero.theme) || 'emerald']}`, children: [_jsxs("div", { className: "pointer-events-none absolute inset-0", children: [_jsx("div", { className: "absolute -left-20 top-8 h-56 w-56 rounded-full bg-white/35 blur-3xl" }), _jsx("div", { className: "absolute right-0 top-0 h-72 w-72 rounded-full bg-white/15 blur-3xl" }), _jsx("div", { className: "absolute bottom-0 left-1/3 h-40 w-40 rounded-full bg-white/15 blur-2xl" })] }), _jsxs("div", { className: "container relative z-10 mx-auto max-w-5xl", children: [hero ? (_jsxs("div", { className: "mb-8 text-center", children: [hero.eyebrow ? (_jsx("span", { className: `inline-flex rounded-full px-3 py-1 text-xs font-black uppercase tracking-[0.2em] shadow-sm ${hero.theme === 'slate' ? 'border border-white/20 bg-white/10 text-white/88' : 'border border-black/10 bg-white/70 text-slate-700'}`, children: hero.eyebrow })) : null, _jsx("h2", { className: `mt-4 text-4xl font-black leading-tight tracking-tight md:text-5xl ${hero.theme === 'slate' ? 'text-white' : 'text-inherit'}`, children: hero.title }), hero.description ? (_jsx("p", { className: `mx-auto mt-2 max-w-3xl text-base font-medium ${hero.theme === 'slate' ? 'text-white/78' : 'text-slate-600'}`, children: hero.description })) : null] })) : null, filtersCard] })] }));
+}
+export function FilterBar({ tiles, filterConfig, hero }) {
+    return (_jsx(Suspense, { fallback: _jsx("div", { className: "w-full h-screen flex items-center justify-center", children: "Loading..." }), children: _jsx(FilterBarComponent, { tiles: tiles, filterConfig: filterConfig, hero: hero }) }));
+}

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: React.FC<any>;
+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,EAAE,KAAK,CAAC,EAAE,CAAC,GAAG,CAAgB,CAAA;AAaxC,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,60 @@
+"use client";
+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";
+const Form = FormProvider;
+const FormFieldContext = React.createContext({});
+const FormField = ({ ...props }) => {
+    return (_jsx(FormFieldContext.Provider, { value: { name: props.name }, children: _jsx(Controller, { ...props }) }));
+};
+const useFormField = () => {
+    const fieldContext = React.useContext(FormFieldContext);
+    const itemContext = React.useContext(FormItemContext);
+    const { getFieldState } = useFormContext();
+    const formState = useFormState({ name: fieldContext.name });
+    const fieldState = getFieldState(fieldContext.name, formState);
+    if (!fieldContext) {
+        throw new Error("useFormField should be used within <FormField>");
+    }
+    const { id } = itemContext;
+    return {
+        id,
+        name: fieldContext.name,
+        formItemId: `${id}-form-item`,
+        formDescriptionId: `${id}-form-item-description`,
+        formMessageId: `${id}-form-item-message`,
+        ...fieldState,
+    };
+};
+const FormItemContext = React.createContext({});
+function FormItem({ className, ...props }) {
+    const id = React.useId();
+    return (_jsx(FormItemContext.Provider, { value: { id }, children: _jsx("div", { "data-slot": "form-item", className: cn("grid gap-2", className), ...props }) }));
+}
+function FormLabel({ className, ...props }) {
+    const { error, formItemId } = useFormField();
+    return (_jsx(Label, { "data-slot": "form-label", "data-error": !!error, className: cn("data-[error=true]:text-destructive-foreground", className), htmlFor: formItemId, ...props }));
+}
+function FormControl({ ...props }) {
+    const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
+    return (_jsx(Slot, { "data-slot": "form-control", id: formItemId, "aria-describedby": !error
+            ? `${formDescriptionId}`
+            : `${formDescriptionId} ${formMessageId}`, "aria-invalid": !!error, ...props }));
+}
+function FormDescription({ className, ...props }) {
+    const { formDescriptionId } = useFormField();
+    return (_jsx("p", { "data-slot": "form-description", id: formDescriptionId, className: cn("text-muted-foreground text-sm", className), ...props }));
+}
+function FormMessage({ className, ...props }) {
+    var _a;
+    const { error, formMessageId } = useFormField();
+    const body = error ? String((_a = error === null || error === void 0 ? void 0 : error.message) !== null && _a !== void 0 ? _a : "") : props.children;
+    if (!body) {
+        return null;
+    }
+    return (_jsx("p", { "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/image-compressor.d.ts

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

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

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

package/dist/misc/image-compressor.js

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

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

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

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

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