@sqrzro/ui 4.0.0-alpha.6 → 4.0.0-alpha.61

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

@@ -1,9 +1,10 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { getClassNames } from '../../../styles/config';
-import tw from '../../../styles/tw';
+import { useClassNames } from '../../../styles/context';
+import tw from '../../../styles/classnames/utility/tw';
 import Assistive from '../Assistive';
 function Loader({ classNameProps, classNames }) {
-    const componentClassNames = classNames || getClassNames('loader')?.(classNameProps);
-    return (_jsxs("div", { className: tw(componentClassNames?.root?.default), children: [_jsx("div", { className: tw(componentClassNames?.inner?.default) }), _jsx(Assistive, { children: "Loading..." })] }));
+    const componentClassNames = useClassNames('loader', { props: classNameProps }, classNames);
+    return (_jsxs("div", { className: tw(componentClassNames?.root), children: [_jsx("div", { className: tw(componentClassNames?.inner) }), _jsx(Assistive, { children: "Loading..." })] }));
 }
 export default Loader;

package/dist/components/utility/Popover/index.d.ts

@@ -1,4 +1,4 @@
-import type { ClassNameProps, FocusableClassName } from '../../../styles/interfaces';
+import type { ClassNameProps, FocusableClassName } from '../../../styles/classnames/interfaces';
 export interface PopoverClassNames {
     root: FocusableClassName;
     scroll: string;

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

@@ -1,8 +1,8 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from 'react';
-import { getClassNames } from '../../../styles/config';
-import tw from '../../../styles/tw';
+import { useClassNames } from '../../../styles/context';
+import tw from '../../../styles/classnames/utility/tw';
 const HORIZONTAL_THRESHOLD = 40;
 const VERTICAL_THRESHOLD = 40;
 function getPositionStyles(align = 'left', vAlign = 'top') {
@@ -22,7 +22,7 @@ function getPositionStyles(align = 'left', vAlign = 'top') {
         : 'left-1/2 -translate-x-1/2 origin-top top-full';
 }
 function Popover({ align: initialAlign = 'left', children, classNames, classNameProps, isOpen, isScrollable, vAlign: initialVAlign = 'bottom', }) {
-    const componentClassNames = classNames || getClassNames('popover')?.(classNameProps);
+    const componentClassNames = useClassNames('popover', { props: classNameProps, states: { isFocused: isOpen ?? false } }, classNames);
     const [align, setAlign] = useState(initialAlign);
     const [vAlign, setVAlign] = useState(initialVAlign);
     const ref = useRef(null);
@@ -36,7 +36,7 @@ function Popover({ align: initialAlign = 'left', children, classNames, className
         shadowRef.current.style.height = `${ref.current?.offsetHeight}px`;
         shadowRef.current.style.width = `${ref.current?.offsetWidth}px`;
         shadowRef.current.style.pointerEvents = 'none';
-        ref.current?.parentElement?.appendChild(shadowRef.current);
+        // ref.current?.parentElement?.appendChild(shadowRef.current);
     }
     function handleResize() {
         const rect = shadowRef.current?.getBoundingClientRect();
@@ -66,6 +66,6 @@ function Popover({ align: initialAlign = 'left', children, classNames, className
             window.removeEventListener('scroll', handleResize);
         };
     }, []);
-    return (_jsx("div", { ref: ref, className: tw('absolute', getPositionStyles(align, vAlign), componentClassNames?.root?.default, isOpen ? componentClassNames?.root?.focused : null), style: { display: isOpen ? 'block' : 'none' }, children: isScrollable ? (_jsx("div", { className: componentClassNames?.scroll, children: children })) : (children) }));
+    return (_jsx("div", { ref: ref, className: tw('absolute', getPositionStyles(align, vAlign), componentClassNames?.root), style: { display: isOpen ? 'block' : 'none' }, children: isScrollable ? (_jsx("div", { className: componentClassNames?.scroll, children: children })) : (children) }));
 }
 export default Popover;

package/dist/components/utility/Toast/index.d.ts

@@ -1,4 +1,4 @@
-import type { ClassNameProps, StylableClassName } from '../../../styles/interfaces';
+import type { ClassNameProps, StylableClassName } from '../../../styles/classnames/interfaces';
 import type { StyleVariant } from '../../../utility/interfaces';
 export interface ToastClassNames {
     root: StylableClassName;
@@ -7,5 +7,5 @@ export interface ToastProps extends ClassNameProps<ToastClassNames> {
     children: React.ReactNode;
     variant?: StyleVariant | null;
 }
-declare function Toast({ children, classNames, classNameProps, }: Readonly<ToastProps>): React.ReactElement | null;
+declare function Toast({ children, classNames, classNameProps, variant, }: Readonly<ToastProps>): React.ReactElement | null;
 export default Toast;

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

@@ -1,11 +1,13 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { getClassNames } from '../../../styles/config';
-function Toast({ children, classNames, classNameProps, }) {
-    const componentClassNames = classNames || getClassNames('toast')?.(classNameProps);
+import { useClassNames } from '../../../styles/context';
+import tw from '../../../styles/classnames/utility/tw';
+import applyVariants from '../../../styles/classnames/utility/apply-variants';
+function Toast({ children, classNames, classNameProps, variant, }) {
+    const componentClassNames = useClassNames('toast', { props: { ...classNameProps, ...applyVariants(variant) } }, classNames);
     if (!children) {
         return null;
     }
-    return _jsx("dialog", { open: true, children: children });
+    return (_jsx("dialog", { className: tw('pointer-events-none fixed z-50', componentClassNames?.root), open: true, children: children }));
 }
 export default Toast;

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

@@ -1,7 +1,7 @@
 /* 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 { Suspense, useEffect, useRef, useState } from 'react';
 import { usePathname } from 'next/navigation';
 import Toast from '../Toast';
 const TOAST_DURATION = 5000;
@@ -46,10 +46,10 @@ function ToasterComponent({ channel, duration, render = Toast, }) {
     useEffect(() => {
         hideToast();
     }, [pathname]);
-    return visible ? (_jsx(Fragment, { children: render({
-            children: message,
-            variant,
-        }) })) : null;
+    return render({
+        children: message,
+        variant,
+    });
 }
 function Toaster(props) {
     return (_jsx(Suspense, { children: _jsx(ToasterComponent, { ...props }) }));

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

@@ -1,7 +1,10 @@
 import type { TableColumnObject } from '../../../components/collections/interfaces';
+import { ClassNameProps } from '../../../styles/classnames/interfaces';
 import type { FilterMap } from '../../interfaces';
-export type { FilterBarClassNames } from '../FilterBarClientComponent';
-interface FilterBarProps<T> {
+export interface FilterBarClassNames {
+    root: string;
+}
+interface FilterBarProps<T> extends ClassNameProps<FilterBarClassNames> {
     columns?: TableColumnObject[];
     map?: FilterMap<T>;
 }

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

@@ -1,9 +1,7 @@
 import type { TableColumnObject } from '../../../components/collections/interfaces';
-import type { ClassNameProps } from '../../../styles/interfaces';
+import type { ClassNameProps } from '../../../styles/classnames/interfaces';
 import type { ClientFilterMap } from '../../interfaces';
-export interface FilterBarClassNames {
-    root: string;
-}
+import type { FilterBarClassNames } from '../FilterBar';
 interface FilterBarClientComponentProps<T> extends ClassNameProps<FilterBarClassNames> {
     columns?: TableColumnObject[];
     map?: ClientFilterMap<T>;

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

@@ -5,17 +5,17 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // import type { InputEvent } from '@sqrzro/interfaces';
 // import { getEntries } from '@sqrzro/utility';
 // import { useRouter } from 'next/navigation';
-// import { getClassNames } from '../../../styles/config';
+// import { useClassNames } 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 { useClassNames } from '../../../styles/context';
 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 componentClassNames = useClassNames('filterBar', { props: classNameProps }, classNames);
     const [filters, setFilter] = useFilters();
     const mapArray = map ? getEntries(map) : [];
     const hasSearch = mapArray.some(([, item]) => item?.type === 'search');
@@ -24,45 +24,5 @@ function FilterBarClientComponent({ classNames, classNameProps, columns, map, })
         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

@@ -1,5 +1,10 @@
-interface FilterClearButtonProps {
+import { ClassNameProps } from '../../../styles/classnames/interfaces';
+export interface FilterClearButtonClassNames {
+    root: string;
+    icon: string;
+}
+interface FilterClearButtonProps extends ClassNameProps<FilterClearButtonClassNames> {
     onClick: () => void;
 }
-declare function FilterClearButton({ onClick }: Readonly<FilterClearButtonProps>): React.ReactElement;
+declare function FilterClearButton({ classNameProps, classNames, onClick, }: FilterClearButtonProps): React.ReactElement;
 export default FilterClearButton;

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

@@ -1,6 +1,10 @@
-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" }));
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment } from 'react';
+import { useClassNames, useIcon } from '../../../styles/context';
+function FilterClearButton({ classNameProps, classNames, onClick, }) {
+    const componentClassNames = useClassNames('filterClear', { props: classNameProps }, classNames);
+    const Icon = useIcon('filter.clear');
+    return (_jsx("button", { className: componentClassNames?.root, onClick: onClick, type: "button", children: Icon ? (_jsxs(Fragment, { children: [_jsx("span", { className: componentClassNames?.icon, children: _jsx(Icon, {}) }), _jsx("span", { className: "sr-only", children: "Clear" })] })) : ('Clear') }));
 }
 export default FilterClearButton;

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

@@ -1,4 +1,4 @@
-import { ClassNameProps } from '../../../styles/interfaces';
+import { ClassNameProps } from '../../../styles/classnames/interfaces';
 import type { FilterItemClassNames } from '../FilterItem';
 interface FilterControlProps extends ClassNameProps<FilterItemClassNames> {
     children: React.ReactNode;

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

@@ -1,10 +1,17 @@
+'use client';
 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 { useClassNames } from '../../../styles/context';
+import tw from '../../../styles/classnames/utility/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] }));
+    const componentClassNames = useClassNames('filterItem', {
+        props: {
+            ...classNameProps,
+            isFocused: isFocused ?? false,
+            isHighlighted: isHighlighted ?? false,
+        },
+    }, classNames);
+    return (_jsxs("div", { className: tw(componentClassNames?.root, isDisabled ? 'pointer-events-none opacity-30' : null), children: [children, isFocused && onClear ? _jsx(FilterClearButton, { onClick: onClear }) : null, onClick ? (_jsx("button", { className: "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

@@ -1,8 +1,9 @@
 import { InputProps } from '../../../forms/interfaces';
-import { ClassNameProps, FocusableClassName, HighlightableClassName } from '../../../styles/interfaces';
+import { ClassNameProps, FocusableClassName, HighlightableClassName } from '../../../styles/classnames/interfaces';
 import { ClientFilterObject, FilterType } from '../../interfaces';
 export interface FilterItemClassNames {
     root: FocusableClassName & HighlightableClassName;
+    label: string;
     value: string;
 }
 interface FilterItemProps<F extends FilterType> extends ClassNameProps<FilterItemClassNames>, ClientFilterObject<F>, InputProps<string> {

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

@@ -2,12 +2,12 @@
 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 { useClassNames } from '../../../styles/context';
 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 componentClassNames = useClassNames('filterItem', { props: classNameProps }, classNames);
     const [isOpen, setIsOpen, node] = useClickOutside();
     // const { dynamicConfig } = useDynamicData(config);
     const [pendingValue, setPendingValue] = useState(value);
@@ -34,10 +34,6 @@ function FilterItem({ align, classNameProps, classNames, config, icon, isDisable
     // 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 })] }));
+    return (_jsxs("div", { ref: node, children: [_jsxs(FilterControl, { isDisabled: isDisabled || (config && 'options' in config && config.options?.length === 0), isFocused: Boolean(value), isHighlighted: isOpen, onClear: handleClear, onClick: toggleIsOpen, children: [_jsx("p", { className: componentClassNames?.label, 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

@@ -1,5 +1,5 @@
 import { InputProps } from '../../../forms/interfaces';
-import { SizableClassName } from '../../../styles/interfaces';
+import { SizableClassName } from '../../../styles/classnames/interfaces';
 import type { ClientFilterObject, FilterType } from '../../interfaces';
 export interface FilterPanelClassNames {
     content: string;

package/dist/filters/{utility/filter.d.ts → filter.d.ts}

@@ -1,4 +1,4 @@
-import type { FilterConfig, FilterConfigWithBooleanData, FilterConfigWithData, FilterObject, FilterType } from '../interfaces';
+import type { FilterConfig, FilterConfigWithBooleanData, FilterConfigWithData, FilterObject, FilterType } from './interfaces';
 interface FilterReturn {
     $dropdown: <T>(config: FilterConfigWithData, transformer: (value: string | null) => T) => FilterObject<T, 'dropdown'>;
     $multi: <T>(config: FilterConfigWithData, transformer: (value: string | null) => T | null) => FilterObject<T[] | null, 'multi'>;

package/dist/filters/{utility/filter.js → filter.js}

@@ -1,8 +1,8 @@
 import { filterNull } from '@sqrzro/utility';
-import getQuickDates from './get-quick-dates';
-import { transformToBoolean } from './transform-boolean';
-import { transformToDate } from './transform-date';
-import { transformToMulti } from './transform-multi';
+import getQuickDates from './utility/get-quick-dates';
+import { transformToBoolean } from './utility/transform-boolean';
+import { transformToDate } from './utility/transform-date';
+import { transformToMulti } from './utility/transform-multi';
 function defaultTransformer(value) {
     return value ? value : null;
 }
@@ -37,9 +37,9 @@ function filter() {
         return {
             config: {
                 ...config,
-                data: [
-                    { label: config?.data?.[0] || 'No', value: '0' },
-                    { label: config?.data?.[1] || 'Yes', value: '1' },
+                options: [
+                    { label: config?.options?.[0] || 'No', value: '0' },
+                    { label: config?.options?.[1] || 'Yes', value: '1' },
                 ],
             },
             label,
@@ -67,7 +67,7 @@ function filter() {
         return {
             config: {
                 ...config,
-                data: [...getQuickDates(), { label: 'Custom...', value: 'custom' }],
+                options: [...getQuickDates(), { label: 'Custom...', value: 'custom' }],
             },
             label,
             transformer: transformToDate,

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

@@ -5,6 +5,6 @@ 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 }) }));
+    return (_jsx(Filter, { ...filterBarProps, children: _jsx(Dropdown, { isPanelOnly: true, name: name, onChange: handleChange, options: config?.options, value: value }) }));
 }
 export default BooleanFilter;

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

@@ -1,10 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import RangeCalendarInput from '../../../forms/components/RangeCalendarInput';
+import { transformFromDate, transformToDate } from '../../utility/transform-date';
 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" }));
+    return (_jsx(Filter, { ...filterBarProps, isDisabled: !value, size: "large", children: _jsx(RangeCalendarInput, { name: name, onChange: handleChange, value: transformToDate(value) }) }));
 }
 export default CalendarFilter;

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

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

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

@@ -1,21 +1,26 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment, useEffect, useState } from 'react';
+import getQuickDates from '../../utility/get-quick-dates';
 import CalendarFilter from '../CalendarFilter';
 import DropdownFilter from '../DropdownFilter';
-function DateFilter({ isOpen, onChange, ...filterBarProps }) {
+function DateFilter({ isOpen, onChange, value, ...filterBarProps }) {
     const [panel, setPanel] = useState('quick');
     function handleDropdownChange(event) {
-        onChange?.(event);
         if (event.target.value === 'custom') {
             setPanel('calendar');
         }
+        else {
+            onChange?.(event);
+        }
     }
     useEffect(() => {
         if (isOpen) {
-            setPanel('quick');
+            setPanel(!value || getQuickDates().some((date) => date.value === value)
+                ? 'quick'
+                : 'calendar');
         }
     }, [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 })] }));
+    return (_jsxs(Fragment, { children: [_jsx(DropdownFilter, { ...filterBarProps, isOpen: Boolean(isOpen && panel === 'quick'), onChange: handleDropdownChange, value: value }), _jsx(CalendarFilter, { ...filterBarProps, isOpen: Boolean(isOpen && panel === 'calendar'), onChange: onChange, value: value })] }));
 }
 export default DateFilter;

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

@@ -5,6 +5,6 @@ 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 }) }));
+    return (_jsx(Filter, { ...filterBarProps, children: _jsx(Dropdown, { isPanelOnly: true, name: name, onChange: handleChange, options: config?.options, value: value }) }));
 }
 export default DropdownFilter;

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

@@ -1,16 +1,17 @@
 import React from 'react';
 import { ClientFilterObject, FilterType } from '../../../filters/interfaces';
-import { ClassNameProps } from '../../../styles/interfaces';
+import type { ClassNameProps } from '../../../styles/classnames/interfaces';
+import { SizeVariant } from '../../../utility/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;
+    isDisabled?: boolean;
     isOpen: boolean;
     onApply: () => void;
-    size?: FilterComponentSize;
+    size?: SizeVariant | null;
     title?: string;
 }
-declare function Filter<F extends FilterType>({ align, children, classNameProps, classNames, icon, isOpen, label, onApply, size, title, }: Readonly<FilterProps<F>>): React.ReactElement;
+declare function Filter<F extends FilterType>({ align, children, classNameProps, classNames, icon, isDisabled, isOpen, label, onApply, size, title, }: Readonly<FilterProps<F>>): React.ReactElement;
 export default Filter;

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

@@ -2,12 +2,12 @@
 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" }) })] }) }));
+import { useClassNames, useIcon } from '../../../styles/context';
+import applySizes from '../../../styles/classnames/utility/apply-sizes';
+function Filter({ align, children, classNameProps, classNames, icon, isDisabled, isOpen, label, onApply, size, title, }) {
+    const componentClassNames = useClassNames('filterPanel', { props: { ...classNameProps, ...applySizes(size) } }, classNames);
+    const DefaultIcon = useIcon('filter.panel');
+    const iconComponent = icon ?? (DefaultIcon ? _jsx(DefaultIcon, {}) : null);
+    return (_jsx(Popover, { align: align, isOpen: isOpen, children: _jsxs("div", { className: componentClassNames?.root, children: [_jsxs("p", { className: componentClassNames?.title, children: [iconComponent ? (_jsx("span", { className: componentClassNames?.icon, children: iconComponent })) : null, title || (label ? `Filter by ${label}` : 'Filter')] }), _jsx("div", { className: componentClassNames?.content, children: children }), _jsx("div", { className: componentClassNames?.footer, children: _jsx(Button, { isDisabled: isDisabled, isFullWidth: true, onClick: onApply, variant: "primary", children: "Apply" }) })] }) }));
 }
 export default Filter;

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

@@ -1,4 +1,9 @@
 import type { InputProps } from '../../../forms/interfaces';
-type SearchFilterProps = Pick<InputProps<string>, 'onChange' | 'value'>;
-declare function SearchFilter({ onChange, value }: Readonly<SearchFilterProps>): React.ReactElement;
+import { ClassNameProps } from '../../../styles/classnames/interfaces';
+export interface SearchFilterClassNames {
+    icon: string;
+    input: string;
+}
+type SearchFilterProps = ClassNameProps<SearchFilterClassNames> & Pick<InputProps<string>, 'onChange' | 'value'>;
+declare function SearchFilter({ classNameProps, classNames, onChange, value, }: Readonly<SearchFilterProps>): React.ReactElement;
 export default SearchFilter;

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

@@ -1,11 +1,13 @@
+'use client';
 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');
+import tw from '../../../styles/classnames/utility/tw';
+import { useClassNames, useIcon } from '../../../styles/context';
+function SearchFilter({ classNameProps, classNames, onChange, value, }) {
+    const componentClassNames = useClassNames('filterSearch', { props: classNameProps }, classNames);
+    const Icon = useIcon('filter.search');
     const [pendingValue, setPendingValue] = useState(value);
     function handleChange(event) {
         setPendingValue(event.target.value);
@@ -19,11 +21,9 @@ function SearchFilter({ onChange, value }) {
             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: {
+    return (_jsxs(Fragment, { children: [_jsx("div", { className: componentClassNames?.icon, children: Icon ? _jsx(Icon, {}) : null }), _jsx(TextInput, { classNames: {
                     root: {
-                        default: tw('', value ? 'bg-slate-700' : 'bg-transparent focus:bg-slate-700'),
+                        default: tw(componentClassNames?.input, value ? 'bg-slate-700' : 'bg-transparent focus:bg-slate-700'),
                     },
                 }, name: "search", onChange: handleChange, onKeyDown: handleKeyDown, value: pendingValue }), value ? _jsx(FilterClearButton, { onClick: handleClear }) : null] }));
 }

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

@@ -1,10 +1,8 @@
 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/index.d.ts

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

package/dist/filters/index.js

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

package/dist/filters/interfaces.d.ts

@@ -6,10 +6,10 @@ export interface FilterConfig {
     title?: string;
 }
 export interface FilterConfigWithBooleanData extends FilterConfig {
-    data?: [string, string];
+    options?: [string, string];
 }
 export interface FilterConfigWithData extends FilterConfig {
-    data?: DropdownObject[];
+    options?: DropdownObject[];
     url?: string;
 }
 export interface ClientFilterObject<F extends FilterType> {

package/dist/filters/utility/render-value.js

@@ -7,7 +7,7 @@ function getNamesFromIDs(ids, data) {
     const set = new Set(ids);
     return data
         .filter((item) => set.has(item.value))
-        .map((item) => item.$data?.label || item.label);
+        .map((item) => item.$data?.label || String(item.label));
 }
 const LENGTH_OF_YEAR = 4;
 const PAD = 2;
@@ -36,14 +36,14 @@ function renderValue(value, config) {
      * If the config has data, extract the names from the data values
      * This should work for boolean, dropdown, and multi filters
      */
-    if (config && 'data' in config) {
-        // Try the entire value first (not array). See if it's in the data, a return the name if so:
-        const [item] = getNamesFromIDs([value], config.data);
+    if (config && 'options' in config) {
+        // Try the entire value first (not array). See if it's in the options, a return the name if so:
+        const [item] = getNamesFromIDs([value], config.options);
         if (item) {
             return item;
         }
         // Now try the split values:
-        const items = getNamesFromIDs(values, config.data);
+        const items = getNamesFromIDs(values, config.options);
         if (items.length) {
             return formatMulti(items);
         }