@myrjfa/ui 1.1.0 → 1.1.1

package/dist/misc/filterBar.js

@@ -1,24 +1,4 @@
 '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";
@@ -29,20 +9,19 @@ import Filter from "./filter";
 import { Sheet, SheetContent, SheetTitle, SheetTrigger } from "./sheet";
 import { Slider } from "./slider";
 // Default filter options (backward compatible)
-var defaultFilterOptions = [
+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' },
 ];
-function FilterBarComponent(_a) {
-    var tiles = _a.tiles, _b = _a.filterConfig, filterConfig = _b === void 0 ? defaultFilterOptions : _b;
-    var searchParams = useSearchParams();
-    var pathname = usePathname();
-    var router = useRouter();
+function FilterBarComponent({ tiles, filterConfig = defaultFilterOptions }) {
+    const searchParams = useSearchParams();
+    const pathname = usePathname();
+    const router = useRouter();
     // Initialize filter state from config
-    var getInitialFilterState = function () {
-        var state = {};
-        filterConfig.forEach(function (opt) {
+    const getInitialFilterState = () => {
+        const state = {};
+        filterConfig.forEach(opt => {
             if (opt.datatype === 'string[]') {
                 state[opt.label] = opt.defaultValue || [];
             }
@@ -58,11 +37,11 @@ function FilterBarComponent(_a) {
         });
         return state;
     };
-    var _c = useState(getInitialFilterState), filterParam = _c[0], setFilterParam = _c[1];
-    useEffect(function () {
-        var newState = {};
-        filterConfig.forEach(function (opt) {
-            var param = searchParams.get(opt.label);
+    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 || [];
             }
@@ -70,9 +49,9 @@ function FilterBarComponent(_a) {
                 newState[opt.label] = parseInt(param || "0", 10) || opt.defaultValue || 0;
             }
             else if (opt.datatype === 'range') {
-                var minParam = searchParams.get("".concat(opt.label, "Min"));
-                var maxParam = searchParams.get("".concat(opt.label, "Max"));
-                var defaultRange = opt.defaultValue || { min: 0, max: 100 };
+                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
@@ -84,22 +63,21 @@ function FilterBarComponent(_a) {
         });
         setFilterParam(newState);
     }, [searchParams, filterConfig]);
-    var changeMultiParams = function (params) {
-        var newParams = new URLSearchParams(searchParams);
+    const changeMultiParams = (params) => {
+        const newParams = new URLSearchParams(searchParams);
         newParams.set('page', '1');
-        Object.entries(params).forEach(function (_a) {
-            var key = _a[0], value = _a[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
-                var config = filterConfig.find(function (f) { return f.label === key; });
-                var defaultRange = (config === null || config === void 0 ? void 0 : config.defaultValue) || { min: 0, max: 100 };
+                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("".concat(key, "Min"), value.min.toString());
-                    newParams.set("".concat(key, "Max"), value.max.toString());
+                    newParams.set(`${key}Min`, value.min.toString());
+                    newParams.set(`${key}Max`, value.max.toString());
                 }
                 else {
-                    newParams.delete("".concat(key, "Min"));
-                    newParams.delete("".concat(key, "Max"));
+                    newParams.delete(`${key}Min`);
+                    newParams.delete(`${key}Max`);
                 }
             }
             else if (Array.isArray(value) && value.length > 0) {
@@ -110,132 +88,129 @@ function FilterBarComponent(_a) {
             }
             else {
                 newParams.delete(key);
-                newParams.delete("".concat(key, "Min"));
-                newParams.delete("".concat(key, "Max"));
+                newParams.delete(`${key}Min`);
+                newParams.delete(`${key}Max`);
             }
         });
-        router.replace("".concat(pathname, "?").concat(newParams.toString()));
+        router.replace(`${pathname}?${newParams.toString()}`);
     };
     // Get filter values based on config
-    var getFilterValues = function (opt) {
+    const getFilterValues = (opt) => {
         if (opt.deriveFromTiles === 'opportunityType' && opt.options) {
             // For opportunityType, dynamically filter options based on what types exist in tiles
-            var availableTypes_1 = new Set((tiles !== null && tiles !== void 0 ? tiles : []).map(function (tile) { return tile.opportunityType || 'volunteer'; }));
+            const availableTypes = new Set((tiles !== null && tiles !== void 0 ? tiles : []).map(tile => tile.opportunityType || 'volunteer'));
             return opt.options
-                .filter(function (o) { return availableTypes_1.has(o.value); })
-                .map(function (o) { return o.label; });
+                .filter(o => availableTypes.has(o.value))
+                .map(o => o.label);
         }
         if (opt.options) {
-            return opt.options.map(function (o) { return o.label; });
+            return opt.options.map(o => o.label);
         }
         if (opt.deriveFromTiles === 'location') {
-            return Array.from(new Set((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().filter(Boolean)));
+            return Array.from(new Set((tiles !== null && tiles !== void 0 ? tiles : []).map(tile => [retrieveState((tile === null || tile === void 0 ? void 0 : tile.location) || ''), retrieveCity((tile === null || tile === void 0 ? void 0 : tile.location) || '')]).flat().filter(Boolean)));
         }
         if (opt.deriveFromTiles === 'skills') {
-            return Array.from(new Set((tiles !== null && tiles !== void 0 ? tiles : []).flatMap(function (tile) { return tile.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(function (tile) { return tile["".concat(opt.deriveFromTiles)]; });
+        return tiles.map(tile => tile[`${opt.deriveFromTiles}`]);
     };
-    var handleFilterChange = function (label, value, datatype, options) {
+    const handleFilterChange = (label, value, datatype, options) => {
         if (value === null || value === "clear") {
-            var config_1 = filterConfig.find(function (f) { return f.label === label; });
-            setFilterParam(function (prev) {
-                var _a;
-                return (__assign(__assign({}, prev), (_a = {}, _a[label] = datatype.includes('[]') ? [] : (datatype === 'number' ? 0 : ((config_1 === null || config_1 === void 0 ? void 0 : config_1.defaultValue) || '')), _a)));
-            });
+            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
-        var actualValue = value;
+        let actualValue = value;
         if (options) {
-            var opt = options.find(function (o) { return o.label === value; });
+            const opt = options.find(o => o.label === value);
             if (opt)
                 actualValue = opt.value;
         }
-        setFilterParam(function (prev) {
-            var _a, _b;
-            var currentValues = prev[label];
-            var newValue = datatype === 'number' ? Number(value[0]) : actualValue;
+        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 __assign(__assign({}, prev), (_a = {}, _a[label] = __spreadArray(__spreadArray([], currentValues, true), [newValue], false), _a));
+                return { ...prev, [label]: [...currentValues, newValue] };
             }
             else {
-                return __assign(__assign({}, prev), (_b = {}, _b[label] = newValue, _b));
+                return { ...prev, [label]: newValue };
             }
         });
     };
-    var handleRangeChange = function (label, field, value) {
-        setFilterParam(function (prev) {
-            var _a, _b;
-            var current = prev[label];
-            return __assign(__assign({}, prev), (_a = {}, _a[label] = __assign(__assign({}, current), (_b = {}, _b[field] = value, _b)), _a));
+    const handleRangeChange = (label, field, value) => {
+        setFilterParam(prev => {
+            const current = prev[label];
+            return {
+                ...prev,
+                [label]: { ...current, [field]: value }
+            };
         });
     };
-    var removeFilter = function (label, value) {
-        var config = filterConfig.find(function (f) { return f.label === label; });
+    const removeFilter = (label, value) => {
+        const config = filterConfig.find(f => f.label === label);
         if ((config === null || config === void 0 ? void 0 : config.datatype) === 'range') {
             // Reset range to default
-            var defaultRange_1 = config.defaultValue || { min: 0, max: 100 };
-            setFilterParam(function (prev) {
-                var _a;
-                return (__assign(__assign({}, prev), (_a = {}, _a[label] = defaultRange_1, _a)));
-            });
+            const defaultRange = config.defaultValue || { min: 0, max: 100 };
+            setFilterParam(prev => ({ ...prev, [label]: defaultRange }));
         }
         else {
-            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 : ((config === null || config === void 0 ? void 0 : config.defaultValue) || ''), _a)));
-            });
+            setFilterParam(prev => ({
+                ...prev,
+                [label]: Array.isArray(prev[label])
+                    ? prev[label].filter(v => v !== value)
+                    : prev[label] === value ? 0 : ((config === null || config === void 0 ? void 0 : config.defaultValue) || '')
+            }));
         }
     };
-    var _d = useState(false), sheetOpen = _d[0], setSheetOpen = _d[1];
+    const [sheetOpen, setSheetOpen] = useState(false);
     // Get current opportunity type for conditional filters
-    var currentType = filterParam['type'] || 'volunteer';
+    const currentType = filterParam['type'] || 'volunteer';
     // Filter configs based on showForTypes
-    var getVisibleConfigs = function (configs) {
-        return configs.filter(function (opt) {
+    const getVisibleConfigs = (configs) => {
+        return configs.filter(opt => {
             if (!opt.showForTypes || opt.showForTypes.length === 0)
                 return true;
             return opt.showForTypes.includes(currentType);
         });
     };
-    var getActiveFilters = function () {
-        var filters = [];
-        Object.entries(filterParam).forEach(function (_a) {
-            var key = _a[0], values = _a[1];
-            var opt = filterConfig.find(function (o) { return o.label === key; });
+    const getActiveFilters = () => {
+        const filters = [];
+        Object.entries(filterParam).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
-                var defaultRange = opt.defaultValue || { min: 0, max: 100 };
+                const defaultRange = opt.defaultValue || { min: 0, max: 100 };
                 if (values.min !== defaultRange.min || values.max !== defaultRange.max) {
                     filters.push({
                         label: key,
-                        value: "".concat(values.min, "-").concat(values.max, " ").concat(opt.rangeUnit || ''),
+                        value: `${values.min}-${values.max} ${opt.rangeUnit || ''}`,
                         displayName: opt.displayName,
                         isRange: true
                     });
                 }
             }
             else if (Array.isArray(values) && values.length > 0) {
-                values.forEach(function (value) {
-                    filters.push({ label: key, value: value, displayName: opt.displayName });
+                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
-                var displayValue = values;
+                let displayValue = values;
                 if (opt.options) {
-                    var found = opt.options.find(function (o) { return o.value === values; });
+                    const found = opt.options.find(o => o.value === values);
                     if (found)
                         displayValue = found.label;
                 }
@@ -244,110 +219,111 @@ function FilterBarComponent(_a) {
         });
         return filters;
     };
-    var activeFilters = getActiveFilters();
-    var clearAllFilters = function () {
-        var clearedParams = getInitialFilterState();
+    const activeFilters = getActiveFilters();
+    const clearAllFilters = () => {
+        const clearedParams = getInitialFilterState();
         setFilterParam(clearedParams);
         changeMultiParams(clearedParams);
         setSheetOpen(false);
     };
-    var renderFilterInput = function (opt) {
+    const renderFilterInput = (opt) => {
         var _a, _b, _c, _d, _e, _f, _g;
         if (opt.type === 'range') {
-            var rangeValue = filterParam[opt.label];
-            var defaultRange = opt.defaultValue || { min: 0, max: 100 };
-            var minVal_1 = (_a = opt.rangeMin) !== null && _a !== void 0 ? _a : defaultRange.min;
-            var maxVal_1 = (_b = opt.rangeMax) !== null && _b !== void 0 ? _b : defaultRange.max;
-            var step = (_c = opt.rangeStep) !== null && _c !== void 0 ? _c : 1;
+            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
-                var noSpinnerStyle = {
+                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_1, max: maxVal_1, onChange: function (e) {
-                                var inputVal = e.target.value;
-                                var val = inputVal === '' ? NaN : parseInt(inputVal);
-                                setFilterParam(function (prev) {
-                                    var _a;
-                                    return (__assign(__assign({}, prev), (_a = {}, _a[opt.label] = __assign(__assign({}, prev[opt.label]), { min: val }), _a)));
-                                });
-                            }, onWheel: function (e) { return 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_1, max: maxVal_1, onChange: function (e) {
-                                var inputVal = e.target.value;
-                                var val = inputVal === '' ? NaN : parseInt(inputVal);
-                                setFilterParam(function (prev) {
-                                    var _a;
-                                    return (__assign(__assign({}, prev), (_a = {}, _a[opt.label] = __assign(__assign({}, prev[opt.label]), { max: val }), _a)));
-                                });
-                            }, onWheel: function (e) { return 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 })] }));
+                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_1, " ", opt.rangeUnit] }), _jsxs("span", { children: [(_e = rangeValue === null || rangeValue === void 0 ? void 0 : rangeValue.max) !== null && _e !== void 0 ? _e : maxVal_1, " ", opt.rangeUnit] })] }), _jsx(Slider, { min: minVal_1, max: maxVal_1, step: step, value: [(_f = rangeValue === null || rangeValue === void 0 ? void 0 : rangeValue.min) !== null && _f !== void 0 ? _f : minVal_1, (_g = rangeValue === null || rangeValue === void 0 ? void 0 : rangeValue.max) !== null && _g !== void 0 ? _g : maxVal_1], onValueChange: function (values) {
-                            setFilterParam(function (prev) {
-                                var _a;
-                                var _b, _c;
-                                return (__assign(__assign({}, prev), (_a = {}, _a[opt.label] = { min: (_b = values[0]) !== null && _b !== void 0 ? _b : minVal_1, max: (_c = values[1]) !== null && _c !== void 0 ? _c : maxVal_1 }, _a)));
+            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" })] }));
         }
-        var selectedValue = (function () {
-            var val = filterParam[opt.label];
+        const selectedValue = (() => {
+            const val = filterParam[opt.label];
             if (opt.datatype.includes('[]')) {
-                var arr = val;
-                return arr.length > 0 ? "".concat(arr.length, " selected") : '';
+                const arr = val;
+                return arr.length > 0 ? `${arr.length} selected` : '';
             }
             if (opt.datatype === 'number') {
-                return val ? "".concat(val, " star or more") : '';
+                return val ? `${val} star or more` : '';
             }
             // For select type, show label not value
             if (opt.options && val) {
-                var found = opt.options.find(function (o) { return o.value === 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: function (value) { return handleFilterChange(opt.label, value, opt.datatype, opt.options); } }));
+        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
-    var visibleConfigs = getVisibleConfigs(filterConfig);
-    var barFilters = visibleConfigs.filter(function (f) { return f.visibility !== 'expanded'; });
-    var expandedFilters = visibleConfigs.filter(function (f) { return f.visibility === 'expanded'; });
-    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: [barFilters.slice(0, 3).map(function (opt) { return (_jsxs("div", { className: "items-center flex-1 hidden md:flex", children: [_jsx("div", { className: "w-full", children: renderFilterInput(opt) }), _jsx("div", { className: "h-6 w-px bg-gray-300 mx-4 md:h-8" })] }, opt.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..." }), expandedFilters.length > 0 && (_jsxs("span", { className: "hidden md:block", children: ["+", expandedFilters.length, " more"] }))] }) }), _jsxs(SheetContent, { side: "top", className: "w-full p-8 z-200 md:items-center overflow-y-auto max-h-[80vh]", children: [_jsx(SheetTitle, { className: "text-lg font-semibold mb-4", children: "Filters" }), _jsx("div", { className: "space-y-6 md:w-3/5", children: visibleConfigs
-                                            .filter(function (opt) { return !opt.groupWith; }) // Only render non-grouped or group leaders
-                                            .map(function (opt) {
+    const visibleConfigs = getVisibleConfigs(filterConfig);
+    const barFilters = visibleConfigs.filter(f => f.visibility !== 'expanded');
+    const expandedFilters = visibleConfigs.filter(f => f.visibility === 'expanded');
+    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: [barFilters.slice(0, 3).map((opt) => (_jsxs("div", { className: "items-center flex-1 hidden md:flex", children: [_jsx("div", { className: "w-full", children: renderFilterInput(opt) }), _jsx("div", { className: "h-6 w-px bg-gray-300 mx-4 md:h-8" })] }, opt.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..." }), expandedFilters.length > 0 && (_jsxs("span", { className: "hidden md:block", children: ["+", expandedFilters.length, " more"] }))] }) }), _jsxs(SheetContent, { side: "top", className: "w-full p-8 z-200 md:items-center overflow-y-auto max-h-[80vh]", children: [_jsx(SheetTitle, { className: "text-lg font-semibold mb-4", children: "Filters" }), _jsx("div", { className: "space-y-6 md:w-3/5", children: visibleConfigs
+                                            .filter(opt => !opt.groupWith) // Only render non-grouped or group leaders
+                                            .map((opt) => {
                                             // Check if this filter has a grouped partner
-                                            var groupedFilter = visibleConfigs.find(function (f) { return f.groupWith === opt.label; });
+                                            const groupedFilter = visibleConfigs.find(f => f.groupWith === opt.label);
                                             if (groupedFilter) {
                                                 // Render grouped filters on same line
                                                 return (_jsxs("div", { className: "space-y-2", children: [_jsxs("label", { className: "text-sm font-medium text-gray-700", children: [groupedFilter.displayName, " & ", opt.displayName] }), _jsxs("div", { className: "bg-gray-50 rounded-lg p-3 flex items-center gap-4", children: [_jsx("div", { className: "w-28", children: renderFilterInput(groupedFilter) }), _jsx("div", { className: "flex-1", children: renderFilterInput(opt) })] })] }, opt.label));
                                             }
                                             // Regular filter
                                             return (_jsxs("div", { className: "space-y-2", children: [_jsx("label", { className: "text-sm font-medium text-gray-700", children: opt.displayName }), _jsx("div", { className: "bg-gray-50 rounded-lg p-3", children: renderFilterInput(opt) })] }, opt.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 () {
+                                        }) }), _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: () => {
                                                     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' && !filter.isRange
-                                        ? "".concat(filter.value, " star or more")
-                                        : filter.value }), _jsx("button", { onClick: function () {
+                                                }, className: "flex-1", children: "Apply Filters" })] })] })] }), _jsx(Button, { variant: "default", onClick: () => 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((filter, index) => (_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' && !filter.isRange
+                                        ? `${filter.value} star or more`
+                                        : filter.value }), _jsx("button", { onClick: () => {
                                         removeFilter(filter.label, filter.value);
-                                        var newState = __assign({}, filterParam);
+                                        const newState = { ...filterParam };
                                         if (filter.isRange) {
-                                            var config = filterConfig.find(function (f) { return f.label === filter.label; });
+                                            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(function (v) { return v !== filter.value; });
+                                            newState[filter.label] = filterParam[filter.label].filter(v => v !== filter.value);
                                         }
                                         else {
-                                            var config = filterConfig.find(function (f) { return f.label === filter.label; });
+                                            const config = filterConfig.find(f => f.label === filter.label);
                                             newState[filter.label] = (config === null || config === void 0 ? void 0 : config.defaultValue) || 0;
                                         }
                                         changeMultiParams(newState);
-                                    }, 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))); }), _jsxs("button", { onClick: 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 })] })] }) }))] }));
+                                    }, className: "ml-1 hover:bg-blue-200 rounded-full p-1 transition-colors", children: _jsx(X, { size: 12 }) })] }, `${filter.label}-${filter.value}-${index}`))), _jsxs("button", { onClick: 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, filterConfig = _a.filterConfig;
+export default function FilterBar({ tiles, filterConfig }) {
     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 }) }));
 }

package/dist/misc/form.js

@@ -1,81 +1,60 @@
 "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)) }));
+const Form = FormProvider;
+const FormFieldContext = React.createContext({});
+const FormField = ({ ...props }) => {
+    return (_jsx(FormFieldContext.Provider, { value: { name: props.name }, children: _jsx(Controller, { ...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);
+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>");
     }
-    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);
+    const { id } = itemContext;
+    return {
+        id,
+        name: fieldContext.name,
+        formItemId: `${id}-form-item`,
+        formDescriptionId: `${id}-form-item-description`,
+        formMessageId: `${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)) }));
+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(_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 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(_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 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(_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 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(_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;
+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", __assign({ "data-slot": "form-message", id: formMessageId, className: cn("text-destructive-foreground text-sm", className) }, props, { children: body })));
+    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, };