@sqrzro/ui 4.0.0-alpha.1 → 4.0.0-alpha.10

package/dist/components/collections/Collection/index.d.ts

@@ -2,14 +2,16 @@ import type { FilterMap } from '../../../filters/interfaces';
 import type { NextPageProps } from '../../../utility/interfaces';
 import type { EmptyMessageProps } from '../EmptyMessage';
 import type { ListFunctionConfig, Paginated } from '../interfaces';
-export interface CollectionProps<Item, Transformed, Filters = null> {
+export interface CollectionComponentProps<Item, Transformed, Filters = null> {
     readonly data?: Item[] | Paginated<Item>;
     readonly emptyMessageProps?: EmptyMessageProps;
     readonly filterMap?: FilterMap<Filters>;
     readonly fn?: (config: ListFunctionConfig<Filters>) => Promise<Item[]> | Promise<Paginated<Item>>;
     readonly pageProps?: NextPageProps;
-    readonly render: (data: Transformed[]) => React.ReactElement;
     readonly transformer: (item: Item) => Transformed;
 }
+export interface CollectionProps<Item, Transformed, Filters = null> extends CollectionComponentProps<Item, Transformed, Filters> {
+    readonly render: (data: Transformed[]) => React.ReactElement;
+}
 declare function Collection<Item extends object, Transformed, Filters>({ filterMap, ...props }: CollectionProps<Item, Transformed, Filters>): React.ReactElement;
 export default Collection;

package/dist/components/collections/List/index.d.ts

@@ -1,6 +1,5 @@
-import { CollectionProps } from '../Collection';
+import { CollectionComponentProps } from '../Collection';
 import type { ListItemObject } from '../interfaces';
-export interface ListProps<Item, Filters = null, Data extends object | null = null> extends Omit<CollectionProps<Item, ListItemObject<Data>, Filters>, 'render'> {
-}
+export type ListProps<Item, Filters = null, Data extends object | null = null> = CollectionComponentProps<Item, ListItemObject<Data>, Filters>;
 declare function List<Item extends object, Filters, Data extends object | null = null>(props: ListProps<Item, Filters, Data>): React.ReactElement;
 export default List;

package/dist/components/collections/Table/index.d.ts

@@ -1,7 +1,7 @@
-import { CollectionProps } from '../Collection';
+import { CollectionComponentProps } from '../Collection';
 import type { TableColumnObject, TableItemObject } from '../interfaces';
 export type { TableClassNames } from '../TableClientComponent';
-export interface TableProps<Item, Filters = null> extends CollectionProps<Item, TableItemObject, Filters> {
+export interface TableProps<Item, Filters = null> extends CollectionComponentProps<Item, TableItemObject, Filters> {
     readonly columns: TableColumnObject[];
     readonly isSelectable?: boolean;
 }

package/dist/components/index.d.ts

@@ -4,6 +4,10 @@ export type { ListProps } from './collections/List';
 export { default as List } from './collections/List';
 export type { TableProps } from './collections/Table';
 export { default as Table } from './collections/Table';
+export type { ConfirmModalProps } from './modals/ConfirmModal';
+export { default as ConfirmModal } from './modals/ConfirmModal';
+export type { ModalProps } from './modals/Modal';
+export { default as Modal } from './modals/Modal';
 export type { ModalLauncherProps } from './modals/ModalLauncher';
 export { default as ModalLauncher } from './modals/ModalLauncher';
 export type { ContainerProps } from './utility/Container';
@@ -12,5 +16,7 @@ export type { LinkProps } from './utility/Link';
 export { default as Link } from './utility/Link';
 export type { PageProps } from './utility/Page';
 export { default as Page } from './utility/Page';
+export type { PopoverProps } from './utility/Popover';
+export { default as Popover } from './utility/Popover';
 export type { RootLayoutProps } from './utility/RootLayout';
 export { default as RootLayout } from './utility/RootLayout';

package/dist/components/index.js

@@ -2,8 +2,11 @@ export * from './collections/interfaces';
 export { default as ActionButton } from './buttons/ActionButton';
 export { default as List } from './collections/List';
 export { default as Table } from './collections/Table';
+export { default as ConfirmModal } from './modals/ConfirmModal';
+export { default as Modal } from './modals/Modal';
 export { default as ModalLauncher } from './modals/ModalLauncher';
 export { default as Container } from './utility/Container';
 export { default as Link } from './utility/Link';
 export { default as Page } from './utility/Page';
+export { default as Popover } from './utility/Popover';
 export { default as RootLayout } from './utility/RootLayout';

package/dist/components/modals/Modal/index.d.ts

@@ -13,7 +13,7 @@ export interface ModalProps extends ClassNameProps<ModalClassNames> {
     children: React.ReactNode;
     icon?: React.ReactNode;
     isLoading?: boolean;
-    title?: string;
+    title?: React.ReactNode;
 }
 declare function Modal({ actions, children, classNames, classNameProps, icon, isLoading, title, }: Readonly<ModalProps>): React.ReactElement | null;
 export default Modal;

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

@@ -7,6 +7,9 @@ export interface RootLayoutClassNames {
 export interface RootLayoutProps extends ClassNameProps<RootLayoutClassNames> {
     readonly children: React.ReactNode;
     readonly classNameConfig?: RegisteredClassNames;
+    readonly font?: {
+        variable: string;
+    };
 }
-declare function RootLayout({ children, classNameConfig, classNameProps, classNames, }: RootLayoutProps): React.ReactElement;
+declare function RootLayout({ children, classNameConfig, classNameProps, classNames, font, }: RootLayoutProps): React.ReactElement;
 export default RootLayout;

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

@@ -2,12 +2,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { getClassNames, registerClassNames } from '../../../styles/config';
 import ClassNames from '../ClassNames';
 import Toaster from '../Toaster';
-function RootLayout({ children, classNameConfig, classNameProps, classNames, }) {
+function RootLayout({ children, classNameConfig, classNameProps, classNames, font, }) {
     if (classNameConfig) {
         registerClassNames(classNameConfig);
     }
     const componentClassNames = classNames || getClassNames('rootLayout')?.(classNameProps);
-    return (_jsxs("html", { lang: "en", children: [_jsx("head", { children: _jsx("link", { href: "/images/favicon.svg", rel: "icon" }) }), _jsxs("body", { className: componentClassNames?.root, children: [_jsx("script", { dangerouslySetInnerHTML: {
+    return (_jsxs("html", { lang: "en", className: font?.variable, children: [_jsx("head", { children: _jsx("link", { href: "/images/favicon.svg", rel: "icon" }) }), _jsxs("body", { className: componentClassNames?.root, children: [_jsx("script", { dangerouslySetInnerHTML: {
                             __html: "(function(d){var v=d.createElement('div'),t=d.createElement('style'),s=v.style;s.overflowY='scroll';s.width='50';s.height='50';d.body.append(v);t.innerHTML='body:has([data-modal][open]){padding-right:'+(v.offsetWidth-v.clientWidth)+'px}';d.body.append(t);v.remove()}(document))",
                         } }), classNameConfig ? _jsx(ClassNames, { data: classNameConfig }) : null, _jsx("div", { className: componentClassNames?.content, children: children }), _jsx(Toaster, {})] })] }));
 }

package/dist/filters/interfaces.d.ts

@@ -21,8 +21,8 @@ export type ClientFilterMap<T> = {
     [K in keyof T]?: ClientFilterObject<FilterType>;
 };
 export interface FilterObject<T, F extends FilterType> extends ClientFilterObject<F> {
-    transformer: (value: string) => T;
+    transformer: (value: string | null) => T | null;
 }
 export type FilterMap<T> = {
-    [K in keyof T]?: FilterObject<T[K], FilterType>;
+    [K in keyof T]?: FilterObject<T[K] | null, FilterType>;
 };

package/dist/filters/utility/parse-filters.d.ts

@@ -1,3 +1,3 @@
-import type { FilterMap } from "../interfaces";
+import type { FilterMap } from '../interfaces';
 declare function parseFilters<T>(searchParams: Record<string, string> | null, map?: FilterMap<T> | null): Partial<T> | null;
 export default parseFilters;

package/dist/filters/utility/parse-filters.js

@@ -6,8 +6,9 @@ function parseFilters(searchParams, map) {
     for (const key in map) {
         if (Object.hasOwn(map, key) && typeof map[key] !== 'undefined') {
             const value = searchParams[key];
-            if (value) {
-                out[key] = map[key].transformer(value);
+            const transformed = map[key].transformer(value);
+            if (transformed) {
+                out[key] = transformed;
             }
         }
     }

package/dist/filters/utility/transform-boolean.d.ts

@@ -1,2 +1,2 @@
 export declare function transformFromBoolean(value?: boolean): string;
-export declare function transformToBoolean(value?: string): boolean;
+export declare function transformToBoolean(value?: string | null): boolean;

package/dist/filters/utility/transform-date.d.ts

@@ -1,2 +1,2 @@
 export declare function transformFromDate(value?: [Date, Date] | null): string;
-export declare function transformToDate(value?: string): [Date, Date] | null;
+export declare function transformToDate(value?: string | null): [Date, Date] | null;

package/dist/filters/utility/transform-multi.d.ts

@@ -1,2 +1,2 @@
 export declare function transformFromMulti(value?: string[] | null): string;
-export declare function transformToMulti(value?: string): string[] | null;
+export declare function transformToMulti(value?: string | null): string[] | null;

package/dist/forms/components/Autocomplete/index.d.ts

@@ -0,0 +1,11 @@
+import { ClassNameProps } from '../../../styles/interfaces';
+import type { DropdownObject, InputProps } from '../../interfaces';
+import { DropdownClassNames, DropdownComponentProps } from '../Dropdown';
+export interface AutocompleteComponentProps<T> extends DropdownComponentProps<T> {
+    isLoading?: boolean;
+    onSearch?: (search: string) => void;
+    selected?: DropdownObject<T> | null;
+}
+export type AutocompleteProps<T> = ClassNameProps<DropdownClassNames> & InputProps<T | null> & AutocompleteComponentProps<T>;
+declare function Autocomplete<T>({ hasError, isDisabled, isLoading, isOptional, name, onChange, onSearch, options, selected, placeholder, value, }: Readonly<AutocompleteProps<T>>): React.ReactElement;
+export default Autocomplete;

package/dist/forms/components/Autocomplete/index.js

@@ -0,0 +1,37 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment, useRef, useState } from 'react';
+import Popover from '../../../components/utility/Popover';
+import useClickOutside from '../../../hooks/useClickOutside';
+import DropdownList from '../DropdownList';
+import StaticTextInput from '../StaticTextInput';
+import TextInput from '../TextInput';
+function Autocomplete({ hasError, isDisabled, isLoading, isOptional, name, onChange, onSearch, options, selected, placeholder, value, }) {
+    const inputRef = useRef(null);
+    const [search, setSearch] = useState('');
+    const [isOpen, setIsOpen, ref] = useClickOutside();
+    function handleChange(event) {
+        if (onChange) {
+            onChange(event);
+        }
+        setIsOpen(false);
+        setSearch('');
+    }
+    function handleSearch(event) {
+        setSearch(event.target.value ?? '');
+        setIsOpen(true);
+        if (onSearch) {
+            onSearch(event.target.value ?? '');
+        }
+    }
+    function handleReset() {
+        if (onChange) {
+            onChange({ target: { name, value: null } });
+        }
+        setTimeout(() => {
+            inputRef.current?.focus();
+        }, 10);
+    }
+    return (_jsx("div", { ref: ref, className: "relative", children: selected ? (_jsx(StaticTextInput, { details: selected.details, hasError: hasError, isDisabled: isDisabled, isOptional: isOptional, label: selected.label, name: name, onClick: handleReset, placeholder: placeholder || 'Select...', value: value ? String(value) : '' })) : (_jsxs(Fragment, { children: [_jsx(TextInput, { ref: inputRef, hasError: hasError, isDisabled: isDisabled, name: `${name}_search`, onChange: handleSearch, onFocus: () => setIsOpen(Boolean(options?.length)), placeholder: "Start typing...", value: search }), _jsx(Popover, { align: "center", isOpen: isOpen, isScrollable: true, children: options?.length ? (_jsx(DropdownList, { name: name, onChange: handleChange, options: options ?? [], value: value })) : isLoading ? (_jsx("div", { children: "Loading..." })) : (_jsx("div", { children: "No results" })) })] })) }));
+}
+export default Autocomplete;

package/dist/forms/components/Dropdown/index.js

@@ -36,6 +36,6 @@ function Dropdown({ classNames, classNameProps, hasError, isDisabled, isOptional
     return (_jsxs("div", { ref: node, className: tw('relative', componentClassNames?.root?.default, hasError ? componentClassNames?.root?.error : null, isOpen && !isDisabled ? componentClassNames?.root?.focused : null), children: [_jsx(StaticTextInput, { classNames: {
                     clear: componentClassNames?.clear,
                     icon: componentClassNames?.icon,
-                }, details: renderDetails(options, value), hasError: hasError, isDisabled: isDisabled || !options?.length, isOpen: isOpen, isOptional: isOptional, label: renderLabel(options, value), name: name, onClear: handleClear, onClick: toggleIsOpen, placeholder: placeholder || 'Select...', value: value ? String(value) : '' }), _jsx(Popover, { align: "center", isOpen: isOpen ? !isDisabled : false, isScrollable: true, children: _jsx(DropdownList, { name: name, onChange: handleChange, options: options, value: value }) })] }));
+                }, details: renderDetails(options, value), hasError: hasError, isDisabled: isDisabled || !options?.length, isOptional: isOptional, label: renderLabel(options, value), name: name, onClear: handleClear, onClick: toggleIsOpen, placeholder: placeholder || 'Select...', value: value ? String(value) : '' }), _jsx(Popover, { align: "center", isOpen: isOpen ? !isDisabled : false, isScrollable: true, children: _jsx(DropdownList, { name: name, onChange: handleChange, options: options, value: value }) })] }));
 }
 export default Dropdown;

package/dist/forms/components/DropdownList/index.js

@@ -15,6 +15,8 @@ function DropdownList({ classNames, classNameProps, name, onChange, options, val
             });
         };
     }
-    return (_jsx("ul", { className: componentClassNames?.list, role: "listbox", children: options.map((item, index) => (_jsx("li", { "aria-selected": isSelected(item.value, value), className: tw('relative', item.isDisabled ? 'pointer-events-none opacity-30' : null, componentClassNames?.item?.default, isSelected(item.value, value) ? componentClassNames?.item?.selected : null), role: "option", children: _jsxs("button", { onClick: handleChange(item), tabIndex: -1, type: "button", children: [_jsx("span", { className: tw('whitespace-nowrap' /*componentClassNames?.label*/), children: item.label }), item.details ? (_jsx("small", { className: tw(componentClassNames?.details), children: item.details })) : null] }) }, index))) }));
+    return (_jsx("ul", { className: componentClassNames?.list, role: "listbox", children: options.map((item, index) => (_jsx("li", { "aria-selected": isSelected(item.value, value), role: "option", children: _jsxs("button", { className: tw('relative w-full text-left', item.isDisabled ? 'pointer-events-none opacity-30' : null, componentClassNames?.item?.default, isSelected(item.value, value)
+                    ? componentClassNames?.item?.selected
+                    : null), onClick: handleChange(item), tabIndex: -1, type: "button", children: [_jsx("span", { className: tw('whitespace-nowrap' /*componentClassNames?.label*/), children: item.label }), item.details ? (_jsx("small", { className: tw(componentClassNames?.details), children: item.details })) : null] }) }, index))) }));
 }
 export default DropdownList;

package/dist/forms/components/Form/index.d.ts

@@ -7,6 +7,7 @@ export interface FormProps extends ClassNameProps<FormClassNames> {
     children: React.ReactNode;
     id?: string;
     onSubmit?: React.FormEventHandler<HTMLFormElement>;
+    ref?: React.Ref<HTMLFormElement>;
 }
-declare function Form({ action, children, classNames, classNameProps, id, onSubmit, }: Readonly<FormProps>): React.ReactElement;
+declare function Form({ action, children, classNames, classNameProps, id, onSubmit, ref, }: Readonly<FormProps>): React.ReactElement;
 export default Form;

package/dist/forms/components/Form/index.js

@@ -2,8 +2,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { getClassNames } from '../../../styles/config';
 import tw from '../../../styles/tw';
-function Form({ action, children, classNames, classNameProps, id, onSubmit, }) {
+function Form({ action, children, classNames, classNameProps, id, onSubmit, ref, }) {
     const componentClassNames = classNames || getClassNames('form')?.(classNameProps);
-    return (_jsx("form", { action: action, className: tw(componentClassNames?.root), id: id, onSubmit: onSubmit, children: children }));
+    return (_jsx("form", { ref: ref, action: action, className: tw(componentClassNames?.root), id: id, onSubmit: onSubmit, children: children }));
 }
 export default Form;

package/dist/forms/components/FormFields/index.d.ts

@@ -1,9 +1,18 @@
 import type { FormFieldComponentProps } from '../../interfaces';
+import type { AutocompleteComponentProps } from '../Autocomplete';
 import type { DropdownComponentProps } from '../Dropdown';
+import type { MoneyInputComponentProps } from '../MoneyInput';
+import type { NumberInputComponentProps } from '../NumberInput';
 import type { PasswordInputComponentProps } from '../PasswordInput';
 import type { TextInputComponentProps } from '../TextInput';
+export type AutocompleteFormFieldProps<T> = FormFieldComponentProps<T | null> & AutocompleteComponentProps<T>;
+export declare function AutocompleteFormField<T>(props: Readonly<AutocompleteFormFieldProps<T>>): React.ReactElement;
 export type DropdownFormFieldProps<T> = FormFieldComponentProps<T | null> & DropdownComponentProps<T>;
 export declare function DropdownFormField<T>(props: Readonly<DropdownFormFieldProps<T>>): React.ReactElement;
+export type MoneyFormFieldProps = FormFieldComponentProps<number> & MoneyInputComponentProps;
+export declare function MoneyFormField(props: Readonly<MoneyFormFieldProps>): React.ReactElement;
+export type NumberFormFieldProps = FormFieldComponentProps<number> & NumberInputComponentProps;
+export declare function NumberFormField(props: Readonly<NumberFormFieldProps>): React.ReactElement;
 export type PasswordFormFieldProps = FormFieldComponentProps<string> & PasswordInputComponentProps;
 export declare function PasswordFormField(props: Readonly<PasswordFormFieldProps>): React.ReactElement;
 export type TextFormFieldProps = FormFieldComponentProps<string> & TextInputComponentProps;

package/dist/forms/components/FormFields/index.js

@@ -1,15 +1,33 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useCallback } from 'react';
 import extractInputProps from '../../utility/extract-input-props';
+import Autocomplete from '../Autocomplete';
 import Dropdown from '../Dropdown';
 import FormField from '../FormField';
+import MoneyInput from '../MoneyInput';
+import NumberInput from '../NumberInput';
 import PasswordInput from '../PasswordInput';
 import TextInput from '../TextInput';
+export function AutocompleteFormField(props) {
+    const { fieldProps, inputProps } = extractInputProps(props);
+    const renderInput = useCallback((renderProps) => (_jsx(Autocomplete, { ...renderProps, ...inputProps })), [inputProps]);
+    return _jsx(FormField, { ...fieldProps, render: renderInput });
+}
 export function DropdownFormField(props) {
     const { fieldProps, inputProps } = extractInputProps(props);
     const renderInput = useCallback((renderProps) => (_jsx(Dropdown, { ...renderProps, ...inputProps })), [inputProps]);
     return _jsx(FormField, { ...fieldProps, render: renderInput });
 }
+export function MoneyFormField(props) {
+    const { fieldProps, inputProps } = extractInputProps(props);
+    const renderInput = useCallback((renderProps) => (_jsx(MoneyInput, { ...renderProps, ...inputProps })), [inputProps]);
+    return _jsx(FormField, { ...fieldProps, render: renderInput });
+}
+export function NumberFormField(props) {
+    const { fieldProps, inputProps } = extractInputProps(props);
+    const renderInput = useCallback((renderProps) => (_jsx(NumberInput, { ...renderProps, ...inputProps })), [inputProps]);
+    return _jsx(FormField, { ...fieldProps, render: renderInput });
+}
 export function PasswordFormField(props) {
     const { fieldProps, inputProps } = extractInputProps(props);
     const renderInput = useCallback((renderProps) => (_jsx(PasswordInput, { ...renderProps, ...inputProps })), [inputProps]);

package/dist/forms/components/MoneyInput/index.d.ts

@@ -0,0 +1,5 @@
+import type { NumberInputComponentProps, NumberInputProps } from '../NumberInput';
+export type MoneyInputComponentProps = NumberInputComponentProps;
+export type MoneyInputProps = NumberInputProps;
+declare function MoneyInput({ name, onChange, prefix, value, ...props }: Readonly<MoneyInputProps>): React.ReactElement;
+export default MoneyInput;

package/dist/forms/components/MoneyInput/index.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import NumberInput from '../NumberInput';
+const FACTOR = 100;
+function setValue(value) {
+    if (typeof value === 'undefined') {
+        return value;
+    }
+    return Math.round(value * FACTOR);
+}
+function getValue(value) {
+    if (typeof value === 'undefined') {
+        return value;
+    }
+    return value / FACTOR;
+}
+function MoneyInput({ name, onChange, prefix = '£', value, ...props }) {
+    function handleChange(event) {
+        onChange?.({ target: { name, value: setValue(event.target.value) } });
+    }
+    return (_jsx(NumberInput, { prefix: prefix, ...props, name: name, onChange: handleChange, value: getValue(value) }));
+}
+export default MoneyInput;

package/dist/forms/components/NumberInput/index.d.ts

@@ -0,0 +1,7 @@
+import { ClassNameProps } from '../../../styles/interfaces';
+import type { InputProps } from '../../interfaces';
+import type { TextInputClassNames, TextInputComponentProps } from '../TextInput';
+export type NumberInputComponentProps = TextInputComponentProps;
+export type NumberInputProps = ClassNameProps<TextInputClassNames> & InputProps<number> & NumberInputComponentProps;
+declare function NumberInput({ onChange, value, ...props }: Readonly<NumberInputProps>): React.ReactElement;
+export default NumberInput;

package/dist/forms/components/NumberInput/index.js

@@ -0,0 +1,27 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import TextInput from '../TextInput';
+function NumberInput({ onChange, value, ...props }) {
+    const ref = useRef(null);
+    function handleChange(event) {
+        onChange?.({ target: { name: event.target.name, value: Number(event.target.value) } });
+    }
+    function disableScroll() {
+        if (ref.current) {
+            ref.current.blur();
+        }
+    }
+    useEffect(() => {
+        if (ref.current) {
+            ref.current.addEventListener('wheel', disableScroll, { passive: false });
+        }
+        return () => {
+            if (ref.current) {
+                ref.current.removeEventListener('wheel', disableScroll);
+            }
+        };
+    }, []);
+    return (_jsx(TextInput, { ...props, ref: ref, onChange: handleChange, type: "number", value: value ? String(value) : '' }));
+}
+export default NumberInput;

package/dist/forms/components/StaticTextInput/index.d.ts

@@ -12,11 +12,10 @@ export interface StaticTextInputProps extends ClassNameProps<StaticTextInputClas
     details?: string | null;
     label: string;
     icon?: React.ReactNode;
-    isOpen?: boolean;
     isOptional?: boolean;
     onClear?: () => void;
     onClick?: React.MouseEventHandler<HTMLButtonElement>;
     placeholder?: string;
 }
-declare function StaticTextInput({ classNames, classNameProps, details, hasError, icon, isDisabled, isOpen, isOptional, label, name, onClear, onClick, onKeyDown, placeholder, value, }: Readonly<StaticTextInputProps>): React.ReactElement;
+declare function StaticTextInput({ classNames, classNameProps, details, hasError, icon, isDisabled, isOptional, label, name, onClear, onClick, onKeyDown, placeholder, value, }: Readonly<StaticTextInputProps>): React.ReactElement;
 export default StaticTextInput;

package/dist/forms/components/StaticTextInput/index.js

@@ -9,7 +9,7 @@ function hasValue(value) {
     }
     return Boolean(value);
 }
-function StaticTextInput({ classNames, classNameProps, details, hasError, icon, isDisabled, isOpen, isOptional, label, name, onClear, onClick, onKeyDown, placeholder = 'Select...', value, }) {
+function StaticTextInput({ classNames, classNameProps, details, hasError, icon, isDisabled, isOptional, label, name, onClear, onClick, onKeyDown, placeholder = 'Select...', value, }) {
     const componentClassNames = {
         ...getClassNames('staticTextInput')?.(classNameProps),
         ...classNames,
@@ -17,6 +17,6 @@ function StaticTextInput({ classNames, classNameProps, details, hasError, icon,
     function handleClear() {
         onClear?.();
     }
-    return (_jsxs("div", { className: tw('relative', isDisabled ? 'pointer-events-none opacity-30' : null, componentClassNames.root?.default, hasError ? componentClassNames.root?.error : null), children: [_jsx("input", { name: name, type: "hidden", value: value ? value.toString() : '' }), label ? (_jsxs(Fragment, { children: [_jsx("span", { className: tw(componentClassNames.label), children: label }), details ? (_jsx("small", { className: tw(componentClassNames.details), children: details })) : null] })) : (_jsx("span", { className: tw(componentClassNames.placeholder), children: placeholder })), onClick ? (_jsx("button", { className: "absolute -bottom-px -left-px -right-px -top-px", disabled: isDisabled, onClick: onClick, onKeyDown: onKeyDown, tabIndex: 0, type: "button", children: _jsx(Assistive, { children: isOpen ? 'Close' : 'Open' }) })) : null, _jsxs("div", { className: "absolute bottom-0 right-0 top-0 flex w-0 items-center justify-end", children: [isOptional && hasValue(value) ? (_jsx("button", { className: tw('flex-none', componentClassNames.clear), onClick: handleClear, type: "button", children: _jsx(Assistive, { children: "Clear" }) })) : null, icon && !isDisabled ? (_jsx("i", { className: tw('pointer-events-none flex-none', componentClassNames.icon) })) : null] })] }));
+    return (_jsxs("div", { className: tw('relative', isDisabled ? 'pointer-events-none opacity-30' : null, componentClassNames.root?.default, hasError ? componentClassNames.root?.error : null), children: [_jsx("input", { name: name, type: "hidden", value: value ? value.toString() : '' }), label ? (_jsxs(Fragment, { children: [_jsx("span", { className: tw(componentClassNames.label), children: label }), details ? (_jsx("small", { className: tw(componentClassNames.details), children: details })) : null] })) : (_jsx("span", { className: tw(componentClassNames.placeholder), children: placeholder })), onClick ? (_jsx("button", { className: "absolute -bottom-px -left-px -right-px -top-px", disabled: isDisabled, onClick: onClick, onKeyDown: onKeyDown, tabIndex: 0, type: "button", children: _jsx(Assistive, { children: "Toggle" }) })) : null, _jsxs("div", { className: "absolute bottom-0 right-0 top-0 flex w-0 items-center justify-end", children: [isOptional && hasValue(value) ? (_jsx("button", { className: tw('flex-none', componentClassNames.clear), onClick: handleClear, type: "button", children: _jsx(Assistive, { children: "Clear" }) })) : null, icon && !isDisabled ? (_jsx("i", { className: tw('pointer-events-none flex-none', componentClassNames.icon) })) : null] })] }));
 }
 export default StaticTextInput;

package/dist/forms/components/TextInput/index.d.ts

@@ -30,5 +30,5 @@ export type TextInputProps = ClassNameProps<TextInputClassNames> & InputProps<st
  * | clear | The wrapper around the 'clear' button of the input, if one exists. The style of the
  * button itself is handled by the `renderClear` prop. | `string` |
  */
-declare function TextInput({ classNames, classNameProps, hasError, id, isAutocomplete, isDisabled, name, onBlur, onChange, onFocus, onKeyDown, placeholder, prefix, suffix, type, value, }: Readonly<TextInputProps>): React.ReactElement;
+declare function TextInput({ classNames, classNameProps, hasError, id, isAutocomplete, isDisabled, name, onBlur, onChange, onFocus, onKeyDown, placeholder, prefix, ref, suffix, type, value, }: Readonly<TextInputProps>): React.ReactElement;
 export default TextInput;

package/dist/forms/components/TextInput/index.js

@@ -13,7 +13,7 @@ import tw from '../../../styles/tw';
  * | clear | The wrapper around the 'clear' button of the input, if one exists. The style of the
  * button itself is handled by the `renderClear` prop. | `string` |
  */
-function TextInput({ classNames, classNameProps, hasError, id, isAutocomplete, isDisabled, name, onBlur, onChange, onFocus, onKeyDown, placeholder, prefix, suffix, type, value, }) {
+function TextInput({ classNames, classNameProps, hasError, id, isAutocomplete, isDisabled, name, onBlur, onChange, onFocus, onKeyDown, placeholder, prefix, ref, suffix, type, value, }) {
     const componentClassNames = classNames || getClassNames('textInput')?.(classNameProps);
     function handleChange(event) {
         if (onChange) {
@@ -21,7 +21,7 @@ function TextInput({ classNames, classNameProps, hasError, id, isAutocomplete, i
             onChange({ target });
         }
     }
-    return (_jsxs("div", { className: tw('relative', prefix ? 'flex flex-row-reverse' : null, (!prefix && suffix) || value ? 'flex' : null, isDisabled ? 'pointer-events-none opacity-30' : null), children: [prefix ? _jsx("div", { children: prefix }) : null, _jsx("input", { "aria-invalid": hasError, "aria-labelledby": hasError
+    return (_jsxs("div", { className: tw('relative', prefix ? 'flex flex-row-reverse' : null, (!prefix && suffix) || value ? 'flex' : null, isDisabled ? 'pointer-events-none opacity-30' : null), children: [prefix ? _jsx("div", { children: prefix }) : null, _jsx("input", { ref: ref, "aria-invalid": hasError, "aria-labelledby": hasError
                     ? `${id || name}_err`
                     : undefined /* eslint-disable-line no-undefined */, autoComplete: isAutocomplete === false
                     ? 'one-time-code'

package/dist/forms/hooks/useAutocomplete.d.ts

@@ -0,0 +1,9 @@
+import { DropdownObject } from '../interfaces';
+import { AutocompleteFormFieldProps } from '../components/FormFields';
+export interface UseAutocompleteArgs<T extends string> {
+    searchFn: (search: string) => Promise<DropdownObject<T>[]>;
+    selectFn: (id: T) => Promise<DropdownObject<T> | null>;
+}
+export type UseAutocompleteReturn<T extends string> = AutocompleteFormFieldProps<T>;
+declare function useAutocomplete<T extends string>(props: AutocompleteFormFieldProps<T>, { searchFn, selectFn }: UseAutocompleteArgs<T>): UseAutocompleteReturn<T>;
+export default useAutocomplete;

package/dist/forms/hooks/useAutocomplete.js

@@ -0,0 +1,31 @@
+'use client';
+import { useEffect, useState } from 'react';
+function useAutocomplete(props, { searchFn, selectFn }) {
+    const [isLoading, setIsLoading] = useState(false);
+    const [options, setOptions] = useState([]);
+    const [selected, setSelected] = useState(null);
+    async function handleSelect(value) {
+        if (!value) {
+            setSelected(null);
+            return;
+        }
+        const response = await selectFn(value);
+        setOptions([]);
+        setSelected(response);
+    }
+    async function handleSearch(search) {
+        if (search.length < 3) {
+            setOptions([]);
+            return;
+        }
+        setIsLoading(true);
+        const response = await searchFn(search);
+        setOptions(response);
+        setIsLoading(false);
+    }
+    useEffect(() => {
+        void handleSelect(props.value);
+    }, [props.value]);
+    return { ...props, isLoading, onSearch: handleSearch, options, selected };
+}
+export default useAutocomplete;

package/dist/forms/hooks/useDropdown.d.ts

@@ -1,9 +1,9 @@
 import { DropdownObject } from '../interfaces';
-interface UseDropdownArgs<T extends string> {
+export interface UseDropdownArgs<T extends string> {
     deps?: unknown[];
     fn: (...args: unknown[]) => Promise<DropdownObject<T>[]>;
 }
-interface UseDropdownReturn<T extends string> {
+export interface UseDropdownReturn<T extends string> {
     data: DropdownObject<T>[];
 }
 declare function useDropdown<T extends string>({ deps, fn }: UseDropdownArgs<T>): UseDropdownReturn<T>;

package/dist/forms/hooks/useForm.d.ts

@@ -35,6 +35,7 @@ export interface UseFormReturn<Request> {
     formData: Partial<Request>;
     formProps: Omit<FormProps, 'children'>;
     isLoading: boolean;
+    ref: React.Ref<HTMLFormElement>;
     resetForm: () => void;
     setErrors: (errors: Record<string, string> | null) => void;
     setFormData: (key: keyof Request, value: Request[keyof Request]) => void;

package/dist/forms/hooks/useForm.js

@@ -120,9 +120,9 @@ function getToastMessage(key, toasts) {
  *   handling additional form events or integrating with different server APIs.
  */
 function useForm({ defaults = {}, onError, onSubmit, onSuccess, onValidation, redirectOnSuccess, refreshOnSuccess, toasts, }) {
-    const innerRef = useRef(null);
+    const ref = useRef(null);
     const router = useRouter();
-    const [isLoading, startTransition] = useTransition();
+    const [isLoading] = useTransition();
     const [errors, setErrors] = useState(null);
     const [data, setData] = useState(defaults);
     const { toastError, toastSuccess } = useToast();
@@ -198,11 +198,12 @@ function useForm({ defaults = {}, onError, onSubmit, onSuccess, onValidation, re
             action: handleSubmit,
         },
         isLoading,
+        ref,
         resetForm,
         setErrors,
         setFormData,
         submitForm: () => {
-            setTimeout(() => innerRef.current?.requestSubmit(), 1);
+            setTimeout(() => ref.current?.requestSubmit(), 1);
         },
     };
 }

package/dist/forms/index.d.ts

@@ -1,4 +1,6 @@
 export * from './interfaces';
+export type { AutocompleteProps } from './components/Autocomplete';
+export { default as Autocomplete } from './components/Autocomplete';
 export type { DropdownClassNames, DropdownProps } from './components/Dropdown';
 export { default as Dropdown } from './components/Dropdown';
 export type { EditableFormClassNames, EditableFormProps } from './components/EditableForm';
@@ -13,15 +15,25 @@ export type { FormSubmitProps } from './components/FormSubmit';
 export { default as FormSubmit } from './components/FormSubmit';
 export type { ModalFormProps } from './components/ModalForm';
 export { default as ModalForm } from './components/ModalForm';
+export type { MoneyInputProps } from './components/MoneyInput';
+export { default as MoneyInput } from './components/MoneyInput';
+export type { NumberInputProps } from './components/NumberInput';
+export { default as NumberInput } from './components/NumberInput';
 export type { PasswordInputClassNames, PasswordInputProps } from './components/PasswordInput';
 export { default as PasswordInput } from './components/PasswordInput';
 export type { TextInputClassNames, TextInputProps } from './components/TextInput';
 export { default as TextInput } from './components/TextInput';
 export type { EditableDropdownFormFieldProps, EditableTextFormFieldProps, } from './components/EditableFormFields';
 export { EditableDropdownFormField, EditableTextFormField } from './components/EditableFormFields';
-export type { DropdownFormFieldProps, PasswordFormFieldProps, TextFormFieldProps, } from './components/FormFields';
-export { DropdownFormField, PasswordFormField, TextFormField } from './components/FormFields';
+export type { AutocompleteFormFieldProps, DropdownFormFieldProps, MoneyFormFieldProps, NumberFormFieldProps, PasswordFormFieldProps, TextFormFieldProps, } from './components/FormFields';
+export { AutocompleteFormField, DropdownFormField, MoneyFormField, NumberFormField, PasswordFormField, TextFormField, } from './components/FormFields';
+export type { UseAutocompleteArgs, UseAutocompleteReturn } from './hooks/useAutocomplete';
+export { default as useAutocomplete } from './hooks/useAutocomplete';
+export type { UseDropdownArgs, UseDropdownReturn } from './hooks/useDropdown';
 export { default as useDropdown } from './hooks/useDropdown';
+export type { UseEditableFormArgs, UseEditableFormReturn } from './hooks/useEditableForm';
 export { default as useEditableForm } from './hooks/useEditableForm';
+export type { UseFormArgs, UseFormReturn } from './hooks/useForm';
 export { default as useForm } from './hooks/useForm';
+export type { UseModalFormArgs, UseModalFormReturn } from './hooks/useModalForm';
 export { default as useModalForm } from './hooks/useModalForm';

package/dist/forms/index.js

@@ -1,4 +1,5 @@
 export * from './interfaces';
+export { default as Autocomplete } from './components/Autocomplete';
 export { default as Dropdown } from './components/Dropdown';
 export { default as EditableForm } from './components/EditableForm';
 export { default as EditableFormField } from './components/EditableFormField';
@@ -6,11 +7,13 @@ export { default as Form } from './components/Form';
 export { default as FormField } from './components/FormField';
 export { default as FormSubmit } from './components/FormSubmit';
 export { default as ModalForm } from './components/ModalForm';
+export { default as MoneyInput } from './components/MoneyInput';
+export { default as NumberInput } from './components/NumberInput';
 export { default as PasswordInput } from './components/PasswordInput';
 export { default as TextInput } from './components/TextInput';
 export { EditableDropdownFormField, EditableTextFormField } from './components/EditableFormFields';
-export { DropdownFormField, PasswordFormField, TextFormField } from './components/FormFields';
-// Hooks
+export { AutocompleteFormField, DropdownFormField, MoneyFormField, NumberFormField, PasswordFormField, TextFormField, } from './components/FormFields';
+export { default as useAutocomplete } from './hooks/useAutocomplete';
 export { default as useDropdown } from './hooks/useDropdown';
 export { default as useEditableForm } from './hooks/useEditableForm';
 export { default as useForm } from './hooks/useForm';

package/dist/forms/interfaces.d.ts

@@ -26,6 +26,7 @@ export interface InputProps<V, T extends V = V> {
     id?: string;
     isDisabled?: boolean;
     name: string;
+    ref?: React.Ref<HTMLInputElement>;
     onChange?: (event: InputEvent<T>) => void;
     onKeyDown?: React.KeyboardEventHandler;
     value?: V;

package/dist/hooks/index.d.ts

@@ -0,0 +1 @@
+export { default as useClickOutside } from './useClickOutside';

package/dist/hooks/index.js

@@ -1 +1 @@
-"use strict";
+export { default as useClickOutside } from './useClickOutside';

package/dist/utility/interfaces.d.ts

@@ -8,7 +8,7 @@ export interface ConfirmableObject {
     onBeforeConfirm?: () => void;
     onConfirm: () => void;
     submitLabel?: string;
-    title?: string;
+    title?: React.ReactNode;
 }
 export interface Action {
     action?: string;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sqrzro/ui",
   "type": "module",
-  "version": "4.0.0-alpha.1",
+  "version": "4.0.0-alpha.10",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "license": "ISC",
@@ -45,7 +45,7 @@
     "react-dom": "^19.2.1",
     "tailwind-merge": "^3.4.0",
     "use-deep-compare-effect": "^1.8.1",
-    "@sqrzro/utility": "^4.0.0-alpha.1"
+    "@sqrzro/utility": "^4.0.0-alpha.2"
   },
   "devDependencies": {
     "@storybook/addon-a11y": "^10.1.7",