@sqrzro/ui 4.0.0-alpha.0 → 4.0.0-alpha.2

package/dist/components/utility/Toaster/index.js

@@ -0,0 +1,57 @@
+/* eslint-disable react/no-multi-comp */
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment, Suspense, useEffect, useRef, useState } from 'react';
+import { usePathname } from 'next/navigation';
+import Toast from '../Toast';
+const TOAST_DURATION = 5000;
+const TRANSITION_DURATION = 200;
+function ToasterComponent({ channel, duration, render = Toast, }) {
+    const to = useRef(null);
+    const pathname = usePathname();
+    const [message, setMessage] = useState(null);
+    const [variant, setVariant] = useState(null);
+    const [visible, setVisible] = useState(false);
+    function showToast(toast) {
+        setMessage(toast?.message || null);
+        setVariant(toast?.type || null);
+    }
+    function hideToast() {
+        setTimeout(() => {
+            setVisible(false);
+            setMessage(null);
+        }, TRANSITION_DURATION);
+    }
+    function addToast(toast) {
+        if (visible) {
+            setTimeout(() => {
+                showToast(toast);
+            }, TRANSITION_DURATION);
+        }
+        else {
+            showToast(toast);
+        }
+        setVisible(true);
+        if (to.current) {
+            clearTimeout(to.current);
+        }
+        to.current = setTimeout(hideToast, duration || TOAST_DURATION);
+    }
+    useEffect(() => {
+        const eventName = channel ? `toast-${channel}` : 'toast';
+        document.addEventListener(eventName, (event) => {
+            addToast(event.detail);
+        });
+    }, []);
+    useEffect(() => {
+        hideToast();
+    }, [pathname]);
+    return visible ? (_jsx(Fragment, { children: render({
+            children: message,
+            variant,
+        }) })) : null;
+}
+function Toaster(props) {
+    return (_jsx(Suspense, { children: _jsx(ToasterComponent, { ...props }) }));
+}
+export default Toaster;

package/dist/filters/components/FilterBar/index.d.ts

@@ -0,0 +1,9 @@
+import type { TableColumnObject } from '../../../components/collections/interfaces';
+import type { FilterMap } from '../../interfaces';
+export type { FilterBarClassNames } from '../FilterBarClientComponent';
+interface FilterBarProps<T> {
+    columns?: TableColumnObject[];
+    map?: FilterMap<T>;
+}
+declare function FilterBar<T>({ columns, map }: Readonly<FilterBarProps<T>>): React.ReactElement;
+export default FilterBar;

package/dist/filters/components/FilterBar/index.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Suspense } from 'react';
+import createClientFilterMap from '../../utility/create-client-filter-map';
+import FilterBarClientComponent from '../FilterBarClientComponent';
+function FilterBar({ columns, map }) {
+    const clientMap = createClientFilterMap(map);
+    return (_jsx(Suspense, { children: _jsx(FilterBarClientComponent, { columns: columns, map: clientMap }) }));
+}
+export default FilterBar;

package/dist/filters/components/FilterBarClientComponent/index.d.ts

@@ -0,0 +1,12 @@
+import type { TableColumnObject } from '../../../components/collections/interfaces';
+import type { ClassNameProps } from '../../../styles/interfaces';
+import type { ClientFilterMap } from '../../interfaces';
+export interface FilterBarClassNames {
+    root: string;
+}
+interface FilterBarClientComponentProps<T> extends ClassNameProps<FilterBarClassNames> {
+    columns?: TableColumnObject[];
+    map?: ClientFilterMap<T>;
+}
+declare function FilterBarClientComponent<T>({ classNames, classNameProps, columns, map, }: Readonly<FilterBarClientComponentProps<T>>): React.ReactElement;
+export default FilterBarClientComponent;

package/dist/filters/components/FilterBarClientComponent/index.js

@@ -0,0 +1,68 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// import { Fragment } from 'react';
+// import { useFilters } from '@sqrzro/hooks';
+// import type { InputEvent } from '@sqrzro/interfaces';
+// import { getEntries } from '@sqrzro/utility';
+// import { useRouter } from 'next/navigation';
+// import { getClassNames } from '../../../styles/config';
+// import type { TableColumnObject } from '../../../tables/TableClientComponent';
+// import type { ClassNameProps } from '../../../utility/interfaces';
+import { getEntries } from '@sqrzro/utility';
+import useFilters from '../../../filters/hooks/useFilters';
+import { getClassNames } from '../../../styles/config';
+import SearchFilter from '../../filters/SearchFilter';
+import FilterItem from '../FilterItem';
+const FILTERED_TYPES = ['assistive', 'search'];
+function FilterBarClientComponent({ classNames, classNameProps, columns, map, }) {
+    const componentClassNames = classNames || getClassNames('filterBar')?.(classNameProps);
+    const [filters, setFilter] = useFilters();
+    const mapArray = map ? getEntries(map) : [];
+    const hasSearch = mapArray.some(([, item]) => item?.type === 'search');
+    const filteredArray = mapArray.filter(([, item]) => item?.type && !FILTERED_TYPES.includes(item.type));
+    function handleChange(event) {
+        setFilter(event.target.name, event.target.value);
+    }
+    return (_jsxs("ul", { className: componentClassNames?.root, children: [hasSearch ? (_jsx("li", { className: "relative", children: _jsx(SearchFilter, { onChange: handleChange, value: filters.get('search') || '' }) })) : null, filteredArray.map(([name, props]) => (_jsx("li", { className: "relative", children: _jsx(FilterItem, { name: String(name), onChange: handleChange, value: filters.get(String(name)) || '', ...props }, String(name)) }, String(name))))] }));
+    // const componentClassNames = classNames || getClassNames('filterBar')?.(classNameProps);
+    // const router = useRouter();
+    // const [filters, setFilter] = useFilters();
+    // const mapArray = map ? getEntries(map) : [];
+    // const hasSearch = mapArray.some(([, item]) => item.type === 'search');
+    // const filteredArray = mapArray.filter(([, item]) => !FILTERED_TYPES.includes(item.type));
+    // function handleChange(event: InputEvent<string>): void {
+    //     setFilter(event.target.name, event.target.value);
+    //     router.refresh();
+    // }
+    // return (
+    //     <ul className={componentClassNames?.root}>
+    //         {hasSearch ? (
+    //             <li className="relative">
+    //                 <SearchFilter onChange={handleChange} value={filters.get('search') || ''} />
+    //             </li>
+    //         ) : null}
+    //         {filteredArray.map(([name, props]) => (
+    //             <li key={String(name)} className="relative">
+    //                 <FilterItem
+    //                     key={String(name)}
+    //                     name={String(name)}
+    //                     onChange={handleChange}
+    //                     value={filters.get(String(name)) || ''}
+    //                     {...props}
+    //                 />
+    //             </li>
+    //         ))}
+    //         {columns?.length ? (
+    //             <Fragment>
+    //                 <li className="relative ml-auto">
+    //                     <ColumnFilter columns={columns} filters={filters} onChange={handleChange} />
+    //                 </li>
+    //                 <li className="relative">
+    //                     <SortFilter columns={columns} filters={filters} onChange={handleChange} />
+    //                 </li>
+    //             </Fragment>
+    //         ) : null}
+    //     </ul>
+    // );
+}
+export default FilterBarClientComponent;

package/dist/filters/components/FilterClearButton/index.d.ts

@@ -0,0 +1,5 @@
+interface FilterClearButtonProps {
+    onClick: () => void;
+}
+declare function FilterClearButton({ onClick }: Readonly<FilterClearButtonProps>): React.ReactElement;
+export default FilterClearButton;

package/dist/filters/components/FilterClearButton/index.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+function FilterClearButton({ onClick }) {
+    // const Icon = getIcon('filterClearButton');
+    return (_jsx("button", { className: "absolute right-0 top-0 z-20 flex h-full w-8 select-none items-center justify-center text-xs", onClick: onClick, type: "button", children: "Remove" }));
+}
+export default FilterClearButton;

package/dist/filters/components/FilterControl/index.d.ts

@@ -0,0 +1,12 @@
+import { ClassNameProps } from '../../../styles/interfaces';
+import type { FilterItemClassNames } from '../FilterItem';
+interface FilterControlProps extends ClassNameProps<FilterItemClassNames> {
+    children: React.ReactNode;
+    isDisabled?: boolean;
+    isFocused?: boolean;
+    isHighlighted?: boolean;
+    onClear?: () => void;
+    onClick?: () => void;
+}
+declare function FilterControl({ classNameProps, classNames, children, isDisabled, isFocused, isHighlighted, onClear, onClick, }: Readonly<FilterControlProps>): React.ReactElement;
+export default FilterControl;

package/dist/filters/components/FilterControl/index.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// import FilterClearButton from '../FilterClearButton';
+import { getClassNames } from '../../../styles/config';
+import tw from '../../../styles/tw';
+import FilterClearButton from '../FilterClearButton';
+function FilterControl({ classNameProps, classNames, children, isDisabled, isFocused, isHighlighted, onClear, onClick, }) {
+    const componentClassNames = classNames || getClassNames('filterItem')?.(classNameProps);
+    return (_jsxs("div", { className: tw(componentClassNames?.root?.default, isDisabled ? 'pointer-events-none opacity-30' : null, isFocused ? componentClassNames?.root?.focused : null, isHighlighted ? componentClassNames?.root?.highlighted : null), children: [children, isFocused && onClear ? _jsx(FilterClearButton, { onClick: onClear }) : null, onClick ? (_jsx("button", { className: tw('absolute -inset-1 z-10 select-none text-transparent'), disabled: isDisabled, onClick: onClick, type: "button", children: "Edit" })) : null] }));
+}
+export default FilterControl;

package/dist/filters/components/FilterItem/index.d.ts

@@ -0,0 +1,14 @@
+import { InputProps } from '../../../forms/interfaces';
+import { ClassNameProps, FocusableClassName, HighlightableClassName } from '../../../styles/interfaces';
+import { ClientFilterObject, FilterType } from '../../interfaces';
+export interface FilterItemClassNames {
+    root: FocusableClassName & HighlightableClassName;
+    value: string;
+}
+interface FilterItemProps<F extends FilterType> extends ClassNameProps<FilterItemClassNames>, ClientFilterObject<F>, InputProps<string> {
+    align?: 'left' | 'right';
+    icon?: React.ReactNode;
+    title?: string;
+}
+declare function FilterItem<F extends FilterType>({ align, classNameProps, classNames, config, icon, isDisabled, label, name, onChange, title, type, value, }: Readonly<FilterItemProps<F>>): React.ReactElement;
+export default FilterItem;

package/dist/filters/components/FilterItem/index.js

@@ -0,0 +1,43 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import useClickOutside from '../../../hooks/useClickOutside';
+import { getClassNames } from '../../../styles/config';
+import renderValue from '../../utility/render-value';
+import FilterControl from '../FilterControl';
+import FilterPanel from '../FilterPanel';
+function FilterItem({ align, classNameProps, classNames, config, icon, isDisabled, label, name, onChange, title, type, value, }) {
+    const componentClassNames = classNames || getClassNames('filterItem')?.(classNameProps);
+    const [isOpen, setIsOpen, node] = useClickOutside();
+    // const { dynamicConfig } = useDynamicData(config);
+    const [pendingValue, setPendingValue] = useState(value);
+    function toggleIsOpen() {
+        setIsOpen(!isOpen);
+    }
+    function handleApply() {
+        onChange?.({ target: { name, value: pendingValue } });
+        setIsOpen(false);
+    }
+    function handleChange(event) {
+        setPendingValue(event.target.value);
+    }
+    function handleClear() {
+        onChange?.({ target: { name, value: '' } });
+        setIsOpen(false);
+    }
+    useEffect(() => {
+        if (isOpen) {
+            setPendingValue(value);
+        }
+    }, [isOpen]);
+    // Switch filter doesn't require the usual `FilterPanel`, so we just return it here.
+    // if (type === 'switch') {
+    //     return <SwitchFilter label={label} name={name} onChange={onChange} value={value || ''} />;
+    // }
+    return (_jsxs("div", { ref: node, children: [_jsxs(FilterControl
+            // isDisabled={isDisabled || (config?.data && config.data.length === 0)}
+            , { 
+                // isDisabled={isDisabled || (config?.data && config.data.length === 0)}
+                isFocused: Boolean(value), isHighlighted: isOpen, onClear: handleClear, onClick: toggleIsOpen, children: [_jsx("p", { children: label }), value ? (_jsx("p", { className: componentClassNames?.value, children: renderValue(value, config) })) : null] }), _jsx(FilterPanel, { align: align, config: config, icon: icon, isOpen: isOpen, label: label, name: name, onApply: handleApply, onChange: handleChange, title: title, type: type, value: pendingValue })] }));
+}
+export default FilterItem;

package/dist/filters/components/FilterPanel/index.d.ts

@@ -0,0 +1,19 @@
+import { InputProps } from '../../../forms/interfaces';
+import { SizableClassName } from '../../../styles/interfaces';
+import type { ClientFilterObject, FilterType } from '../../interfaces';
+export interface FilterPanelClassNames {
+    content: string;
+    footer: string;
+    icon: string;
+    root: SizableClassName;
+    title: string;
+}
+export interface FilterPanelProps<F extends FilterType> extends ClientFilterObject<F>, InputProps<string> {
+    align?: 'left' | 'right';
+    icon?: React.ReactNode;
+    isOpen: boolean;
+    onApply: () => void;
+    title?: string;
+}
+declare function FilterPanel<F extends FilterType>({ align, config, icon, isOpen, label, name, onApply, onChange, title, type, value, }: Readonly<FilterPanelProps<F>>): React.ReactElement | null;
+export default FilterPanel;

package/dist/filters/components/FilterPanel/index.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import BooleanFilter from '../../filters/BooleanFilter';
+import CalendarFilter from '../../filters/CalendarFilter';
+import DateFilter from '../../filters/DateFilter';
+import DropdownFilter from '../../filters/DropdownFilter';
+import MultiFilter from '../../filters/MultiFilter';
+function FilterPanel({ align, config, icon, isOpen, label, name, onApply, onChange, title, type, value, }) {
+    const props = {
+        align,
+        icon,
+        isOpen,
+        label,
+        name,
+        onApply,
+        onChange,
+        title,
+        value,
+    };
+    if (type === 'boolean') {
+        return _jsx(BooleanFilter, { config: config, ...props });
+    }
+    if (type === 'calendar') {
+        return _jsx(CalendarFilter, { ...props });
+    }
+    if (type === 'date') {
+        return _jsx(DateFilter, { config: config, ...props });
+    }
+    if (type === 'dropdown') {
+        return _jsx(DropdownFilter, { config: config, ...props });
+    }
+    if (type === 'multi') {
+        return _jsx(MultiFilter, { config: config, ...props });
+    }
+    return null;
+}
+export default FilterPanel;

package/dist/filters/filters/BooleanFilter/index.d.ts

@@ -0,0 +1,3 @@
+import type { FilterComponentProps } from '../interfaces';
+declare function BooleanFilter({ config, name, onChange, value, ...filterBarProps }: Readonly<FilterComponentProps<'boolean'>>): React.ReactElement;
+export default BooleanFilter;

package/dist/filters/filters/BooleanFilter/index.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Dropdown from '../../../forms/components/Dropdown';
+import Filter from '../Filter';
+function BooleanFilter({ config, name, onChange, value, ...filterBarProps }) {
+    function handleChange(event) {
+        onChange?.({ target: { name, value: event.target.value || '' } });
+    }
+    return (_jsx(Filter, { ...filterBarProps, children: _jsx(Dropdown, { isPanelOnly: true, name: name, onChange: handleChange, options: config?.data, value: value }) }));
+}
+export default BooleanFilter;

package/dist/filters/filters/CalendarFilter/index.d.ts

@@ -0,0 +1,3 @@
+import type { FilterComponentProps } from '../interfaces';
+declare function CalendarFilter({ name, onChange, value, ...filterBarProps }: Readonly<FilterComponentProps<'calendar'>>): React.ReactElement;
+export default CalendarFilter;

package/dist/filters/filters/CalendarFilter/index.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Filter from '../Filter';
+import { transformFromDate } from '../../utility/transform-date';
+function CalendarFilter({ name, onChange, value, ...filterBarProps }) {
+    function handleChange(event) {
+        onChange?.({ target: { name, value: transformFromDate(event.target.value) } });
+    }
+    return (_jsx(Filter, { ...filterBarProps, size: "lg", children: "LOREM" }));
+}
+export default CalendarFilter;

package/dist/filters/filters/DateFilter/index.d.ts

@@ -0,0 +1,3 @@
+import type { FilterComponentProps } from '../interfaces';
+declare function DateFilter({ isOpen, onChange, ...filterBarProps }: Readonly<FilterComponentProps<'date'>>): React.ReactElement;
+export default DateFilter;

package/dist/filters/filters/DateFilter/index.js

@@ -0,0 +1,21 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment, useEffect, useState } from 'react';
+import CalendarFilter from '../CalendarFilter';
+import DropdownFilter from '../DropdownFilter';
+function DateFilter({ isOpen, onChange, ...filterBarProps }) {
+    const [panel, setPanel] = useState('quick');
+    function handleDropdownChange(event) {
+        onChange?.(event);
+        if (event.target.value === 'custom') {
+            setPanel('calendar');
+        }
+    }
+    useEffect(() => {
+        if (isOpen) {
+            setPanel('quick');
+        }
+    }, [isOpen]);
+    return (_jsxs(Fragment, { children: [_jsx(DropdownFilter, { ...filterBarProps, isOpen: Boolean(isOpen && panel === 'quick'), onChange: handleDropdownChange }), _jsx(CalendarFilter, { ...filterBarProps, isOpen: Boolean(isOpen && panel === 'calendar'), onChange: onChange })] }));
+}
+export default DateFilter;

package/dist/filters/filters/DropdownFilter/index.d.ts

@@ -0,0 +1,3 @@
+import type { FilterComponentProps } from '../interfaces';
+declare function DropdownFilter({ config, name, onChange, value, ...filterBarProps }: Readonly<FilterComponentProps<'dropdown'>>): React.ReactElement;
+export default DropdownFilter;

package/dist/filters/filters/DropdownFilter/index.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Dropdown from '../../../forms/components/Dropdown';
+import Filter from '../Filter';
+function DropdownFilter({ config, name, onChange, value, ...filterBarProps }) {
+    function handleChange(event) {
+        onChange?.({ target: { name, value: event.target.value || '' } });
+    }
+    return (_jsx(Filter, { ...filterBarProps, children: _jsx(Dropdown, { isPanelOnly: true, name: name, onChange: handleChange, options: config?.data, value: value }) }));
+}
+export default DropdownFilter;

package/dist/filters/filters/Filter/index.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { ClientFilterObject, FilterType } from '../../../filters/interfaces';
+import { ClassNameProps } from '../../../styles/interfaces';
+import { FilterPanelClassNames } from '../../components/FilterPanel';
+import { FilterComponentSize } from '../interfaces';
+interface FilterProps<F extends FilterType> extends ClassNameProps<FilterPanelClassNames>, ClientFilterObject<F> {
+    align?: 'left' | 'right';
+    children: React.ReactNode;
+    icon?: React.ReactNode;
+    isOpen: boolean;
+    onApply: () => void;
+    size?: FilterComponentSize;
+    title?: string;
+}
+declare function Filter<F extends FilterType>({ align, children, classNameProps, classNames, icon, isOpen, label, onApply, size, title, }: Readonly<FilterProps<F>>): React.ReactElement;
+export default Filter;

package/dist/filters/filters/Filter/index.js

@@ -0,0 +1,13 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Button from '../../../components/buttons/Button';
+import Popover from '../../../components/utility/Popover';
+import { getClassNames } from '../../../styles/config';
+import { getIcon } from '../../../styles/icons';
+import tw from '../../../styles/tw';
+function Filter({ align, children, classNameProps, classNames, icon, isOpen, label, onApply, size, title, }) {
+    const componentClassNames = classNames || getClassNames('filterPanel')?.(classNameProps);
+    const DefaultIcon = getIcon('filter.panel');
+    return (_jsx(Popover, { align: align, isOpen: isOpen, children: _jsxs("div", { className: tw(componentClassNames?.root?.default, size ? componentClassNames?.root?.[size] : null), children: [_jsxs("p", { className: componentClassNames?.title, children: [icon === false ? null : (_jsx("span", { className: componentClassNames?.icon, children: icon || (DefaultIcon ? _jsx(DefaultIcon, {}) : null) })), title || (label ? `Filter by ${label}` : 'Filter')] }), _jsx("div", { className: componentClassNames?.content, children: children }), _jsx("div", { className: componentClassNames?.footer, children: _jsx(Button, { isFullWidth: true, onClick: onApply, variant: "primary", children: "Apply" }) })] }) }));
+}
+export default Filter;

package/dist/filters/filters/MultiFilter/index.d.ts

@@ -0,0 +1,3 @@
+import type { FilterComponentProps } from '../interfaces';
+declare function MultiFilter({ config, name, onChange, value, ...filterBarProps }: Readonly<FilterComponentProps<'multi'>>): React.ReactElement;
+export default MultiFilter;

package/dist/filters/filters/MultiFilter/index.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Filter from '../Filter';
+function MultiFilter({ config, name, onChange, value, ...filterBarProps }) {
+    // function handleChange(event: InputEvent<string[] | null>): void {
+    //     onChange?.({ target: { name, value: transformFromMulti(event.target.value) } });
+    // }
+    return (_jsx(Filter, { ...filterBarProps, children: "LOREM" }));
+}
+export default MultiFilter;

package/dist/filters/filters/SearchFilter/index.d.ts

@@ -0,0 +1,4 @@
+import type { InputProps } from '../../../forms/interfaces';
+type SearchFilterProps = Pick<InputProps<string>, 'onChange' | 'value'>;
+declare function SearchFilter({ onChange, value }: Readonly<SearchFilterProps>): React.ReactElement;
+export default SearchFilter;

package/dist/filters/filters/SearchFilter/index.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment, useState } from 'react';
+import FilterClearButton from '../../../filters/components/FilterClearButton';
+import TextInput from '../../../forms/components/TextInput';
+import { getIcon } from '../../../styles/icons';
+import tw from '../../../styles/tw';
+function SearchFilter({ onChange, value }) {
+    const Icon = getIcon('filter.search');
+    const [pendingValue, setPendingValue] = useState(value);
+    function handleChange(event) {
+        setPendingValue(event.target.value);
+    }
+    function handleClear() {
+        setPendingValue('');
+        onChange?.({ target: { name: 'search', value: '' } });
+    }
+    function handleKeyDown(event) {
+        if (event.key === 'Enter') {
+            onChange?.({ target: { name: 'search', value: pendingValue } });
+        }
+    }
+    //pointer-events-none absolute left-2 top-0 z-10 flex h-full items-center
+    //h-8 w-56 rounded-full border border-slate-400 pl-7 pr-3 text-xs text-white placeholder:text-slate-300
+    return (_jsxs(Fragment, { children: [_jsx("div", { className: "", children: Icon ? _jsx(Icon, { className: "h-4 w-4 text-white" }) : null }), _jsx(TextInput, { classNames: {
+                    root: {
+                        default: tw('', value ? 'bg-slate-700' : 'bg-transparent focus:bg-slate-700'),
+                    },
+                }, name: "search", onChange: handleChange, onKeyDown: handleKeyDown, value: pendingValue }), value ? _jsx(FilterClearButton, { onClick: handleClear }) : null] }));
+}
+export default SearchFilter;

package/dist/filters/filters/interfaces.d.ts

@@ -0,0 +1,10 @@
+import { InputProps } from '../../forms/interfaces';
+import { ClientFilterObject, FilterType } from '../interfaces';
+export type FilterComponentSize = 'lg';
+export interface FilterComponentProps<F extends FilterType> extends Omit<ClientFilterObject<F>, 'type'>, InputProps<string> {
+    icon?: React.ReactNode;
+    isOpen: boolean;
+    onApply: () => void;
+    size?: FilterComponentSize;
+    title?: string;
+}

package/dist/filters/filters/interfaces.js

@@ -0,0 +1 @@
+export {};

package/dist/filters/hooks/useFilters.d.ts

@@ -0,0 +1,5 @@
+declare function useFilters(): [
+    URLSearchParams,
+    (first: Record<string, string | null> | string, second?: string | null) => void
+];
+export default useFilters;

package/dist/filters/hooks/useFilters.js

@@ -0,0 +1,25 @@
+'use client';
+import { usePathname, useRouter, useSearchParams } from 'next/navigation';
+function useFilters() {
+    const searchParams = useSearchParams();
+    const pathname = usePathname();
+    const router = useRouter();
+    function setToURL(searchParams) {
+        router.replace(`${pathname}?${searchParams.toString()}`);
+    }
+    function setFilters(first, second) {
+        const newSearchParams = new URLSearchParams(searchParams.toString());
+        const data = typeof first === 'string' ? { [first]: second } : first;
+        for (const [name, value] of Object.entries(data)) {
+            if (value === '' || value === null || typeof value === 'undefined') {
+                newSearchParams.delete(name);
+            }
+            else {
+                newSearchParams.set(name, value);
+            }
+        }
+        setToURL(newSearchParams);
+    }
+    return [new URLSearchParams(searchParams.toString()), setFilters];
+}
+export default useFilters;

package/dist/filters/index.d.ts

@@ -0,0 +1,2 @@
+export * from './interfaces';
+export { default as filter } from './utility/filter';

package/dist/filters/index.js

@@ -0,0 +1,2 @@
+export * from './interfaces';
+export { default as filter } from './utility/filter';

package/dist/filters/interfaces.d.ts

@@ -0,0 +1,28 @@
+import type { DropdownObject } from '../forms/interfaces';
+export type FilterType = 'assistive' | 'boolean' | 'calendar' | 'column' | 'date' | 'dropdown' | 'money' | 'multi' | 'range' | 'search' | 'sort' | 'switch';
+export interface FilterConfig {
+    align?: 'left' | 'right';
+    icon?: React.ReactNode;
+    title?: string;
+}
+export interface FilterConfigWithBooleanData extends FilterConfig {
+    data?: [string, string];
+}
+export interface FilterConfigWithData extends FilterConfig {
+    data?: DropdownObject[];
+    url?: string;
+}
+export interface ClientFilterObject<F extends FilterType> {
+    config?: F extends 'boolean' | 'date' | 'dropdown' | 'multi' ? FilterConfigWithData : FilterConfig;
+    label?: string;
+    type?: F;
+}
+export type ClientFilterMap<T> = {
+    [K in keyof T]?: ClientFilterObject<FilterType>;
+};
+export interface FilterObject<T, F extends FilterType> extends ClientFilterObject<F> {
+    transformer: (value: string) => T;
+}
+export type FilterMap<T> = {
+    [K in keyof T]?: FilterObject<T[K], FilterType>;
+};

package/dist/filters/interfaces.js

@@ -0,0 +1 @@
+export {};

package/dist/filters/lang.d.ts

@@ -0,0 +1 @@
+export declare const NON_FILTER_KEYS: string[];

package/dist/filters/lang.js

@@ -0,0 +1 @@
+export const NON_FILTER_KEYS = ['action', 'columns', 'id', 'page', 'selected', 'sort'];

package/dist/filters/utility/check-has-filters.d.ts

@@ -0,0 +1,2 @@
+declare function checkHasFilters(searchParams: Record<string, string> | null): boolean;
+export default checkHasFilters;

package/dist/filters/utility/check-has-filters.js

@@ -0,0 +1,8 @@
+import { NON_FILTER_KEYS } from '../lang';
+function checkHasFilters(searchParams) {
+    if (!searchParams) {
+        return false;
+    }
+    return Object.keys(searchParams).filter((key) => !NON_FILTER_KEYS.includes(key)).length > 0;
+}
+export default checkHasFilters;

package/dist/filters/utility/create-client-filter-map.d.ts

@@ -0,0 +1,3 @@
+import type { ClientFilterMap, FilterMap } from '../interfaces';
+declare function createClientFilterMap<T>(map?: FilterMap<T>): ClientFilterMap<T>;
+export default createClientFilterMap;

package/dist/filters/utility/create-client-filter-map.js

@@ -0,0 +1,14 @@
+function createClientFilterMap(map) {
+    const clientMap = {};
+    if (!map) {
+        return clientMap;
+    }
+    for (const key in map) {
+        if (Object.hasOwn(map, key) && typeof map[key] !== 'undefined') {
+            const { transformer, ...rest } = map[key];
+            clientMap[key] = rest;
+        }
+    }
+    return clientMap;
+}
+export default createClientFilterMap;