@sqrzro/ui 4.0.0-alpha.4 → 4.0.0-alpha.41

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

@@ -0,0 +1,32 @@
+import { ClassNameProps } from '../../../styles/classnames/interfaces';
+export interface CalendarClassNames {
+    root: string;
+    header: string;
+    title: string;
+    navigation: string;
+    month: string;
+    control: string;
+    head: string;
+    day: string;
+}
+interface BaseCalendarProps extends ClassNameProps<CalendarClassNames> {
+    disabledDates?: Date[] | ((date: Date) => boolean);
+}
+interface CalendarPropsWithoutRange extends BaseCalendarProps {
+    isRange?: false;
+    onChange?: (date: Date | null) => void;
+    value?: Date | null;
+}
+interface CalendarPropsWithRange extends BaseCalendarProps {
+    isRange: true;
+    onChange?: (date: [Date, Date] | null) => void;
+    value?: [Date, Date] | null;
+}
+export interface CalendarProps extends BaseCalendarProps {
+    isRange?: boolean;
+    onChange?: ((date: Date | null) => void) | ((date: [Date, Date] | null) => void);
+    value?: Date | [Date, Date] | null;
+}
+declare function Calendar(props: CalendarPropsWithRange): React.ReactElement;
+declare function Calendar(props: CalendarPropsWithoutRange): React.ReactElement;
+export default Calendar;

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

@@ -0,0 +1,67 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment, useState } from 'react';
+import tw from '../../../styles/classnames/utility/tw';
+import getDays from '../../../utility/get-days';
+import getWeeks from '../../../utility/get-weeks';
+import isDateHighlighted from '../../../utility/is-date-highlighted';
+import isDateSelected from '../../../utility/is-date-selected';
+import CalendarDay from '../CalendarDay';
+import { useClassNames, useIcon } from '../../../styles/context';
+function sortDates(dates) {
+    return dates[0] > dates[1] ? [dates[1], dates[0]] : [dates[0], dates[1]];
+}
+function makeValidDate(date) {
+    if (date.toString() === 'Invalid Date') {
+        return new Date();
+    }
+    return new Date(date);
+}
+function getActiveDate(value) {
+    if (!value || (Array.isArray(value) && !value.length)) {
+        return new Date();
+    }
+    return makeValidDate(Array.isArray(value) ? value[0] : value);
+}
+function Calendar({ classNameProps, classNames, isRange, onChange, value, }) {
+    const componentClassNames = useClassNames('calendar', { props: classNameProps }, classNames);
+    const NextIcon = useIcon('calendar.next');
+    const PreviousIcon = useIcon('calendar.previous');
+    const [date, setDate] = useState(getActiveDate(value));
+    /*
+     * `pendingValue` is used when the BaseCalendar takes a date range, to select the first date in
+     * the range without affecting the onChange handlers or anything higher up the chain. Only when
+     * the second date has been selected will the handlers fire.
+     */
+    const [pendingValue, setPendingValue] = useState(null);
+    function handleMonth(offset) {
+        const newDate = new Date(date);
+        newDate.setDate(1);
+        newDate.setMonth(date.getMonth() + offset);
+        setDate(newDate);
+    }
+    function handlePrevious() {
+        handleMonth(-1);
+    }
+    function handleNext() {
+        handleMonth(1);
+    }
+    function handleChange(date) {
+        if (!onChange) {
+            return;
+        }
+        if (!isRange) {
+            onChange(date);
+            return;
+        }
+        if (pendingValue) {
+            onChange(sortDates([pendingValue, date]));
+            setPendingValue(null);
+            return;
+        }
+        onChange(null);
+        setPendingValue(date);
+    }
+    return (_jsxs("div", { className: componentClassNames?.root, children: [_jsxs("div", { className: componentClassNames?.header, children: [_jsx("p", { className: componentClassNames?.title, children: new Intl.DateTimeFormat('en-GB', { month: 'long', year: 'numeric' }).format(date) }), _jsx("button", { className: componentClassNames?.navigation, onClick: handlePrevious, type: "button", children: PreviousIcon ? (_jsxs(Fragment, { children: [_jsx(PreviousIcon, {}), _jsx("span", { className: "sr-only", children: "Previous" })] })) : ('Previous') }), _jsx("button", { className: componentClassNames?.navigation, onClick: handleNext, type: "button", children: NextIcon ? (_jsxs(Fragment, { children: [_jsx(NextIcon, {}), _jsx("span", { className: "sr-only", children: "Next" })] })) : ('Next') })] }), _jsxs("table", { className: tw('w-full', componentClassNames?.month), children: [_jsx("thead", { children: _jsx("tr", { children: getDays().map((item) => (_jsx("th", { className: componentClassNames?.head, children: item }, item))) }) }), _jsx("tbody", { children: getWeeks(date).map((days) => (_jsx("tr", { children: days.map((day, index) => (_jsx(CalendarDay, { date: day, isHighlighted: isDateHighlighted(day, pendingValue, value), isSelected: isDateSelected(day, pendingValue, value), onClick: handleChange }, day ? day.toString() : index))) }, days.map((d) => d?.toString()).join('-')))) })] })] }));
+}
+export default Calendar;

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

@@ -0,0 +1,11 @@
+import { ClassNameProps } from '../../../styles/classnames/interfaces';
+import type { CalendarClassNames } from '../Calendar';
+interface CalendarDayProps extends ClassNameProps<CalendarClassNames> {
+    date: Date | null;
+    onClick?: (date: Date) => void;
+    isDisabled?: boolean;
+    isHighlighted?: boolean;
+    isSelected?: boolean;
+}
+declare function CalendarDay({ classNames, classNameProps, date, isDisabled, isHighlighted, isSelected, onClick, }: Readonly<CalendarDayProps>): React.ReactElement;
+export default CalendarDay;

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

@@ -0,0 +1,23 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useClassNames } from '../../../styles/context';
+function CalendarDay({ classNames, classNameProps, date, isDisabled, isHighlighted, isSelected, onClick, }) {
+    const componentClassNames = useClassNames('calendar', {
+        props: {
+            ...classNameProps,
+            isHighlighted: isHighlighted ?? false,
+            isSelected: isSelected ?? false,
+        },
+    }, classNames);
+    if (date === null) {
+        return _jsx("td", { className: componentClassNames?.day });
+    }
+    function handleClick() {
+        if (onClick && date instanceof Date) {
+            onClick(date);
+        }
+    }
+    const day = new Intl.DateTimeFormat('en-GB', { day: 'numeric' }).format(date);
+    return (_jsx("td", { className: componentClassNames?.day, children: _jsx("button", { className: componentClassNames?.control, disabled: isDisabled, onClick: handleClick, type: "button", children: day }) }));
+}
+export default CalendarDay;

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

@@ -0,0 +1,9 @@
+import { ButtonProps } from '../../../components/buttons/Button';
+import type { ConfirmableObject } from '../../../utility/interfaces';
+export interface ConfirmableProps<Data, Response> {
+    confirmable: ConfirmableObject<Data, Response>;
+    renderProps: ButtonProps;
+    render: (props: ButtonProps) => React.ReactElement;
+}
+declare function Confirmable<Data, Response>({ confirmable, renderProps, render, }: Readonly<ConfirmableProps<Data, Response>>): React.ReactElement;
+export default Confirmable;

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

@@ -0,0 +1,14 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment } from 'react';
+import useConfirmable from '../../../hooks/useConfirmable';
+import ConfirmModal from '../../modals/ConfirmModal';
+function Confirmable({ confirmable, renderProps, render, }) {
+    const { handle, isOpen, modalProps } = useConfirmable({
+        isLoading: renderProps.isLoading,
+        onConfirm: (event) => renderProps.onClick?.(event),
+        refreshOnSuccess: true,
+    });
+    return (_jsxs(Fragment, { children: [render({ ...renderProps, isLoading: renderProps.isLoading, onClick: handle }), isOpen ? _jsx(ConfirmModal, { confirmable: confirmable, ...modalProps }) : null] }));
+}
+export default Confirmable;

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

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

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

@@ -1,8 +1,8 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { getClassNames } from '../../../styles/config';
+import { useClassNames } from '../../../styles/context';
 function Container({ children, classNameProps, classNames, }) {
-    const componentClassNames = classNames || getClassNames('container')?.(classNameProps);
+    const componentClassNames = useClassNames('container', { props: classNameProps }, classNames);
     return _jsx("div", { className: componentClassNames?.root, children: children });
 }
 export default Container;

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

@@ -1,4 +1,4 @@
-import type { ClassNameProps, SizableClassName } from '../../../styles/interfaces';
+import type { ClassNameProps, SizableClassName } from '../../../styles/classnames/interfaces';
 export interface LoaderClassNames {
     root?: SizableClassName;
     inner?: SizableClassName;

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;