@sqrzro/ui 4.0.0-alpha.8 → 4.0.0-alpha.81

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

@@ -1,16 +1,17 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Modal from '../../../components/modals/Modal';
-import ModalActions from '../../../components/modals/ModalActions';
-import useSearchParamsHref from '../../../hooks/useSearchParamsHref';
+import Modal from '../../../components/modals/Modal/index.js';
+import ModalActions from '../../../components/modals/ModalActions/index.js';
+import useSearchParamsHref from '../../../hooks/useSearchParamsHref.js';
 import Form from '../Form';
-function ModalForm({ children, formProps, hasServerError, hasSubmit = true, isDisabled, modalProps, submitLabel, }) {
+import { InfoPanel } from '../../../components/index.js';
+function ModalForm({ children, formProps, hasSubmit = true, isDisabled, modalProps, serverError, submitLabel, validationErrors, }) {
     const { setSearchParamsHref } = useSearchParamsHref();
     function handleCancel() {
-        setSearchParamsHref('action', null);
+        setSearchParamsHref({ action: null, id: null });
     }
-    return (_jsx(Modal, { ...modalProps, children: _jsxs(Form, { ...formProps, children: [children, hasServerError ? _jsx("div", { children: "SERVER ERROR" }) : null, _jsx(ModalActions, { actions: [
-                        { label: 'Cancel', onClick: handleCancel, variant: 'link' },
+    return (_jsx(Modal, { ...modalProps, children: _jsxs(Form, { ...formProps, children: [serverError ? _jsx(InfoPanel, { variant: "error", children: serverError }) : null, validationErrors?.length ? (_jsx(InfoPanel, { variant: "error", children: JSON.stringify(validationErrors) })) : null, children, _jsx(ModalActions, { actions: [
+                        { label: 'Cancel', onClick: handleCancel },
                         ...(modalProps.actions || []),
                         hasSubmit
                             ? {

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

@@ -1,4 +1,4 @@
-import { ClassNameProps } from '../../../styles/interfaces';
+import { ClassNameProps } from '../../../styles/classnames/interfaces.js';
 import type { InputProps } from '../../interfaces';
 import type { TextInputClassNames, TextInputComponentProps } from '../TextInput';
 export type NumberInputComponentProps = TextInputComponentProps;

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

@@ -0,0 +1,16 @@
+import { ClassNameProps } from '../../../styles/index.js';
+export interface PasswordComplexityClassNames {
+    root: string;
+    list: string;
+    item: string;
+    icon: string;
+}
+export interface PasswordComplexityProps extends ClassNameProps<PasswordComplexityClassNames> {
+    data: {
+        status: boolean;
+        value: string;
+    }[];
+    onComplexity?: (isValid: boolean) => void;
+}
+declare function PasswordComplexity({ classNameProps, classNames, data, onComplexity, }: PasswordComplexityProps): React.ReactElement;
+export default PasswordComplexity;

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

@@ -0,0 +1,14 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useClassNames } from '../../../styles/index.js';
+import useDeepCompareEffect from 'use-deep-compare-effect';
+import PasswordComplexityItem from '../PasswordComplexityItem';
+function PasswordComplexity({ classNameProps, classNames, data, onComplexity, }) {
+    useDeepCompareEffect(() => {
+        onComplexity?.(data.every((item) => item.status));
+    }, [data]);
+    const isValid = data.every((item) => item.status);
+    const componentClassNames = useClassNames('passwordComplexity', { props: { ...classNameProps, isValid } }, classNames);
+    return (_jsx("aside", { className: componentClassNames?.root, children: _jsx("ul", { className: componentClassNames?.list, children: data.map((item) => (_jsx(PasswordComplexityItem, { classNameProps: classNameProps, classNames: classNames, isValid: item.status, value: item.value }, item.value))) }) }));
+}
+export default PasswordComplexity;

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

@@ -0,0 +1,8 @@
+import { ClassNameProps } from '../../../styles/index.js';
+import type { PasswordComplexityClassNames } from '../PasswordComplexity';
+interface PasswordComplexityItemProps extends ClassNameProps<PasswordComplexityClassNames> {
+    isValid: boolean;
+    value: string;
+}
+declare function PasswordComplexityItem({ classNameProps, classNames, isValid, value, }: PasswordComplexityItemProps): React.ReactElement;
+export default PasswordComplexityItem;

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

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useClassNames, useIcon } from '../../../styles/index.js';
+function PasswordComplexityItem({ classNameProps, classNames, isValid, value, }) {
+    const componentClassNames = useClassNames('passwordComplexity', { props: { ...classNameProps, isValid } }, classNames);
+    const InvalidIcon = useIcon('passwordComplexity.invalid');
+    const ValidIcon = useIcon('passwordComplexity.valid');
+    const Icon = isValid ? ValidIcon : InvalidIcon;
+    return (_jsxs("li", { className: componentClassNames?.item, children: [Icon ? (_jsx("div", { className: componentClassNames?.icon, children: _jsx(Icon, {}) })) : null, value] }));
+}
+export default PasswordComplexityItem;

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

@@ -1,5 +1,5 @@
-import { InputProps } from '../../../forms/interfaces';
-import type { ClassNameProps, SelectableClassName } from '../../../styles/interfaces';
+import { InputProps } from '../../interfaces.js';
+import type { ClassNameProps, SelectableClassName } from '../../../styles/classnames/interfaces.js';
 import type { TextInputComponentProps } from '../TextInput';
 export interface PasswordInputClassNames {
     action: string;

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

@@ -1,17 +1,17 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
-import { getClassNames } from '../../../styles/config';
-import { getIcon } from '../../../styles/icons';
-import tw from '../../../styles/tw';
+import { useClassNames, useIcon } from '../../../styles/context.js';
 import TextInput from '../TextInput';
 function PasswordInput({ classNameProps, classNames, ...props }) {
-    const componentClassNames = classNames || getClassNames('passwordInput')?.(classNameProps);
-    const Icon = getIcon('password');
     const [isVisible, setIsVisible] = useState(false);
+    const componentClassNames = useClassNames('passwordInput', { props: classNameProps, states: { isSelected: isVisible } }, classNames);
+    const HiddenIcon = useIcon('passwordInput.hidden');
+    const VisibleIcon = useIcon('passwordInput.visible');
+    const Icon = isVisible ? VisibleIcon : HiddenIcon;
     function toggleVisible() {
         setIsVisible(!isVisible);
     }
-    return (_jsxs("div", { className: "relative", children: [_jsx(TextInput, { type: isVisible ? 'text' : 'password', ...props }), _jsx("div", { className: componentClassNames?.action, children: _jsxs("button", { className: tw(componentClassNames?.icon?.default, isVisible ? componentClassNames?.icon?.selected : null), onClick: toggleVisible, type: "button", children: [Icon ? _jsx(Icon, {}) : null, isVisible ? 'Hide' : 'Show'] }) })] }));
+    return (_jsxs("div", { className: "relative", children: [_jsx(TextInput, { type: isVisible ? 'text' : 'password', ...props }), _jsx("div", { className: componentClassNames?.action, children: _jsxs("button", { className: componentClassNames?.icon, onClick: toggleVisible, type: "button", children: [Icon ? _jsx(Icon, {}) : null, isVisible ? 'Hide' : 'Show'] }) })] }));
 }
 export default PasswordInput;

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

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

package/dist/forms/components/{MoneyInput → PointsInput}/index.js

@@ -13,10 +13,10 @@ function getValue(value) {
     }
     return value / FACTOR;
 }
-function MoneyInput({ name, onChange, prefix = '£', value, ...props }) {
+function PointsInput({ name, onChange, 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) }));
+    return _jsx(NumberInput, { ...props, name: name, onChange: handleChange, value: getValue(value) });
 }
-export default MoneyInput;
+export default PointsInput;

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

@@ -0,0 +1,6 @@
+import { InputProps } from '../../interfaces';
+import { BaseCalendarInputComponentProps } from '../BaseCalendarInput';
+export type RangeCalendarInputComponentProps = BaseCalendarInputComponentProps;
+export type RangeCalendarInputProps = InputProps<[Date, Date] | null> & RangeCalendarInputComponentProps;
+declare function RangeCalendarInput({ name, onChange, value, ...baseProps }: RangeCalendarInputProps): React.ReactElement;
+export default RangeCalendarInput;

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

@@ -0,0 +1,14 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import Calendar from '../../../components/utility/Calendar/index.js';
+import BaseCalendarInput from '../BaseCalendarInput';
+function RangeCalendarInput({ name, onChange, value, ...baseProps }) {
+    function handleChange(eventValue) {
+        onChange?.({ target: { name, value: eventValue } });
+    }
+    function handleClear() {
+        onChange?.({ target: { name, value: null } });
+    }
+    return (_jsx(BaseCalendarInput, { ...baseProps, name: name, onClear: handleClear, value: value, children: _jsx(Calendar, { isRange: true, onChange: handleChange, value: value }) }));
+}
+export default RangeCalendarInput;

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

@@ -1,5 +1,5 @@
-import type { InputProps } from '../../../forms/interfaces';
-import type { ClassNameProps, ErrorableClassName } from '../../../styles/interfaces';
+import type { InputProps } from '../../interfaces.js';
+import type { ClassNameProps, ErrorableClassName } from '../../../styles/classnames/interfaces.js';
 export interface StaticTextInputClassNames {
     root: ErrorableClassName;
     placeholder: string;
@@ -10,7 +10,7 @@ export interface StaticTextInputClassNames {
 }
 export interface StaticTextInputProps extends ClassNameProps<StaticTextInputClassNames>, Omit<InputProps<string[] | string, string[] | string>, 'onChange'> {
     details?: string | null;
-    label: string;
+    label: React.ReactNode;
     icon?: React.ReactNode;
     isOptional?: boolean;
     onClear?: () => void;

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

@@ -1,8 +1,9 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment } from 'react';
-import Assistive from '../../../components/utility/Assistive';
-import { getClassNames } from '../../../styles/config';
-import tw from '../../../styles/tw';
+import Assistive from '../../../components/utility/Assistive/index.js';
+import { useClassNames, useIcon } from '../../../styles/context.js';
+import tw from '../../../styles/classnames/utility/tw.js';
 function hasValue(value) {
     if (Array.isArray(value)) {
         return Boolean(value.filter((item) => Boolean(item)).length);
@@ -10,13 +11,11 @@ function hasValue(value) {
     return Boolean(value);
 }
 function StaticTextInput({ classNames, classNameProps, details, hasError, icon, isDisabled, isOptional, label, name, onClear, onClick, onKeyDown, placeholder = 'Select...', value, }) {
-    const componentClassNames = {
-        ...getClassNames('staticTextInput')?.(classNameProps),
-        ...classNames,
-    };
+    const componentClassNames = useClassNames('staticTextInput', { props: classNameProps, states: { isError: hasError ?? false } }, classNames);
+    const ClearIcon = useIcon('staticTextInput.clear');
     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: "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] })] }));
+    return (_jsxs("div", { className: tw('relative', componentClassNames?.root, isDisabled ? 'pointer-events-none opacity-30' : null), children: [_jsx("input", { name: name, type: "hidden", value: value ? value.toString() : '' }), label ? (_jsxs(Fragment, { children: [_jsx("span", { className: componentClassNames?.label, children: label }), details ? (_jsx("small", { className: componentClassNames?.details, children: details })) : null] })) : (_jsx("span", { className: 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-1 top-0 flex w-0 items-center justify-end", children: [isOptional && hasValue(value) ? (_jsxs("button", { className: tw('flex-none', componentClassNames?.clear), onClick: handleClear, type: "button", children: [ClearIcon ? _jsx(ClearIcon, {}) : null, _jsx(Assistive, { children: "Clear" })] })) : null, icon && !isDisabled ? (_jsx("div", { className: tw('pointer-events-none flex-none', componentClassNames?.icon), children: icon })) : null] })] }));
 }
 export default StaticTextInput;

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

@@ -1,11 +1,17 @@
-import type { InputProps } from '../../../forms/interfaces';
-import { CheckableClassName, ClassNameProps } from '../../../styles/interfaces';
+import type { InputProps } from '../../interfaces.js';
+import { CheckableClassName, ClassNameProps } from '../../../styles/classnames/interfaces.js';
 export interface SwitchClassNames {
     root: string;
     control: string;
     input: CheckableClassName;
     icon: CheckableClassName;
+    label: string;
+    details: string;
 }
-export type SwitchProps = ClassNameProps<SwitchClassNames> & InputProps<boolean>;
-declare function Switch({ classNameProps, classNames, id, isDisabled, name, onChange, value, }: Readonly<SwitchProps>): React.ReactElement;
+export type SwitchComponentProps = {
+    details?: React.ReactNode;
+    label?: React.ReactNode;
+};
+export type SwitchProps = ClassNameProps<SwitchClassNames> & InputProps<boolean> & SwitchComponentProps;
+declare function Switch({ classNameProps, classNames, details, id, isDisabled, label, name, onChange, value, }: Readonly<SwitchProps>): React.ReactElement;
 export default Switch;

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

@@ -1,9 +1,11 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment } from 'react';
-import { getClassNames } from '../../../styles/config';
-import tw from '../../../styles/tw';
-function Switch({ classNameProps, classNames, id, isDisabled, name, onChange, value, }) {
-    const componentClassNames = classNames || getClassNames('switch')?.(classNameProps);
+import Assistive from '../../../components/utility/Assistive/index.js';
+import { useClassNames } from '../../../styles/context.js';
+import tw from '../../../styles/classnames/utility/tw.js';
+function Switch({ classNameProps, classNames, details, id, isDisabled, label, name, onChange, value, }) {
+    const componentClassNames = useClassNames('switch', { props: classNameProps, states: { isChecked: Boolean(value) } }, classNames);
     function handleChange(event) {
         if (onChange) {
             const inputEvent = {
@@ -12,6 +14,6 @@ function Switch({ classNameProps, classNames, id, isDisabled, name, onChange, va
             onChange(inputEvent);
         }
     }
-    return (_jsxs(Fragment, { children: [_jsx("input", { name: name, type: "hidden", value: "false" }), _jsx("div", { className: tw('block', componentClassNames?.root), children: _jsxs("div", { className: tw('relative', componentClassNames?.control), children: [_jsx("input", { "aria-checked": Boolean(value), checked: Boolean(value), className: tw('appearance-none', componentClassNames?.input?.default, value ? componentClassNames?.input?.checked : null), disabled: isDisabled, id: id || name, name: name, onChange: handleChange, type: "checkbox", value: "true" }), _jsx("i", { className: tw(componentClassNames?.icon?.default, value ? componentClassNames?.icon?.checked : null) })] }) })] }));
+    return (_jsxs(Fragment, { children: [_jsx("input", { name: name, type: "hidden", value: "false" }), _jsxs("div", { className: tw('block', componentClassNames?.root), children: [_jsxs("div", { className: tw('relative', componentClassNames?.control, isDisabled ? 'pointer-events-none opacity-30' : ''), children: [_jsx("input", { "aria-checked": Boolean(value), checked: Boolean(value), className: tw('appearance-none', componentClassNames?.input), disabled: isDisabled, id: id || name, name: name, onChange: handleChange, type: "checkbox", value: "true" }), _jsx("i", { className: componentClassNames?.icon })] }), label ? (_jsxs("label", { htmlFor: id || name, children: [_jsx("span", { className: tw('', componentClassNames?.label), children: label }), details ? (_jsx("small", { className: tw('', componentClassNames?.details), children: details })) : null] })) : (_jsx(Assistive, { children: "Yes?" }))] })] }));
 }
 export default Switch;

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

@@ -0,0 +1,14 @@
+import type { InputProps } from '../../interfaces.js';
+import type { ClassNameProps, ErrorableClassName } from '../../../styles/classnames/interfaces.js';
+export interface TextAreaClassNames {
+    root: ErrorableClassName;
+}
+export interface TextAreaComponentProps {
+    onBlur?: React.EventHandler<React.FocusEvent>;
+    onFocus?: React.EventHandler<React.FocusEvent>;
+    placeholder?: string;
+    rows?: number;
+}
+export type TextAreaProps = ClassNameProps<TextAreaClassNames> & InputProps<string> & TextAreaComponentProps;
+declare function TextArea({ classNames, classNameProps, hasError, id, isDisabled, name, onBlur, onChange, onFocus, onKeyDown, placeholder, rows, value, }: Readonly<TextAreaProps>): React.ReactElement;
+export default TextArea;

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

@@ -0,0 +1,15 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useClassNames } from '../../../styles/context.js';
+import tw from '../../../styles/classnames/utility/tw.js';
+function TextArea({ classNames, classNameProps, hasError, id, isDisabled, name, onBlur, onChange, onFocus, onKeyDown, placeholder, rows = 4, value, }) {
+    const componentClassNames = useClassNames('textArea', { props: classNameProps, states: { isError: hasError ?? false } }, classNames);
+    function handleChange(event) {
+        if (onChange) {
+            const target = { name, value: event.target.value };
+            onChange({ target });
+        }
+    }
+    return (_jsx("textarea", { "aria-invalid": hasError, "aria-labelledby": hasError ? `${id || name}_err` : undefined /* eslint-disable-line no-undefined */, className: tw('w-full focus-visible:outline-0', isDisabled ? 'pointer-events-none opacity-30' : null, componentClassNames?.root), disabled: isDisabled, id: id || name, name: name, onBlur: onBlur, onChange: handleChange, onFocus: onFocus, onKeyDown: onKeyDown, placeholder: placeholder, rows: rows, value: value || '' }));
+}
+export default TextArea;

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

@@ -1,5 +1,5 @@
-import type { InputProps } from '../../../forms/interfaces';
-import type { ClassNameProps, ErrorableClassName } from '../../../styles/interfaces';
+import type { InputProps } from '../../interfaces.js';
+import type { ClassNameProps, ErrorableClassName } from '../../../styles/classnames/interfaces.js';
 export interface TextInputClassNames {
     loading: string;
     prefix: ErrorableClassName;

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

@@ -1,6 +1,7 @@
+'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.js';
+import tw from '../../../styles/classnames/utility/tw.js';
 /**
  *
  * ## ClassNames
@@ -14,7 +15,7 @@ import tw from '../../../styles/tw';
  * button itself is handled by the `renderClear` prop. | `string` |
  */
 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);
+    const componentClassNames = useClassNames('textInput', { props: classNameProps, states: { isError: hasError ?? false } }, classNames);
     function handleChange(event) {
         if (onChange) {
             const target = { name, value: event.target.value };
@@ -25,6 +26,6 @@ function TextInput({ classNames, classNameProps, hasError, id, isAutocomplete, i
                     ? `${id || name}_err`
                     : undefined /* eslint-disable-line no-undefined */, autoComplete: isAutocomplete === false
                     ? 'one-time-code'
-                    : undefined /* eslint-disable-line no-undefined */, className: tw('peer w-full focus-visible:outline-0', prefix ? 'border-l-0' : null, (!prefix && suffix) || value ? 'border-r-0' : null, componentClassNames?.root?.default, hasError ? componentClassNames?.root?.error : null), disabled: isDisabled, formNoValidate: true, id: id || name, name: name, onBlur: onBlur, onChange: handleChange, onFocus: onFocus, onKeyDown: onKeyDown, placeholder: placeholder, type: type, value: value || '' }), suffix ? _jsx("div", { children: suffix }) : null] }));
+                    : undefined /* eslint-disable-line no-undefined */, className: tw('peer w-full focus-visible:outline-0', prefix ? 'border-l-0' : null, (!prefix && suffix) || value ? 'border-r-0' : null, componentClassNames?.root), disabled: isDisabled, formNoValidate: true, id: id || name, name: name, onBlur: onBlur, onChange: handleChange, onFocus: onFocus, onKeyDown: onKeyDown, placeholder: placeholder, type: type, value: value || '' }), suffix ? _jsx("div", { children: suffix }) : null] }));
 }
 export default TextInput;

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

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

package/dist/forms/hooks/useAutocomplete.js

@@ -1,6 +1,6 @@
 'use client';
 import { useEffect, useState } from 'react';
-function useAutocomplete(props, { searchFn, selectFn }) {
+function useAutocomplete(props, { searchFn, selectFn, deps }) {
     const [isLoading, setIsLoading] = useState(false);
     const [options, setOptions] = useState([]);
     const [selected, setSelected] = useState(null);
@@ -9,7 +9,7 @@ function useAutocomplete(props, { searchFn, selectFn }) {
             setSelected(null);
             return;
         }
-        const response = await selectFn(value);
+        const response = await selectFn(value, ...(deps ?? []));
         setOptions([]);
         setSelected(response);
     }
@@ -19,13 +19,13 @@ function useAutocomplete(props, { searchFn, selectFn }) {
             return;
         }
         setIsLoading(true);
-        const response = await searchFn(search);
+        const response = await searchFn(search, ...(deps ?? []));
         setOptions(response);
         setIsLoading(false);
     }
     useEffect(() => {
         void handleSelect(props.value);
-    }, [props.value]);
+    }, [props.value, ...(deps ?? [])]);
     return { ...props, isLoading, onSearch: handleSearch, options, selected };
 }
 export default useAutocomplete;

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

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

package/dist/forms/hooks/useDropdown.js

@@ -1,14 +1,14 @@
 'use client';
 import { useEffect, useState } from 'react';
-function useDropdown({ deps, fn }) {
-    const [data, setData] = useState([]);
+function useDropdown(props, { deps, fn }) {
+    const [options, setOptions] = useState([]);
     async function getData() {
-        const response = await (deps ? fn(...deps) : fn());
-        setData(response);
+        const response = await fn(...(deps ?? []));
+        setOptions(response);
     }
     useEffect(() => {
         void getData();
     }, deps || []);
-    return { data };
+    return { ...props, options };
 }
 export default useDropdown;

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

@@ -0,0 +1,4 @@
+import { EditableDropdownFormFieldProps } from '../components/EditableFormFields';
+import { UseDropdownArgs } from './useDropdown';
+declare function useEditableDropdown<T extends string, U extends unknown[] = unknown[]>(props: EditableDropdownFormFieldProps<T>, args: UseDropdownArgs<T, U>): EditableDropdownFormFieldProps<T>;
+export default useEditableDropdown;

package/dist/forms/hooks/useEditableDropdown.js

@@ -0,0 +1,6 @@
+'use client';
+import useDropdown from './useDropdown';
+function useEditableDropdown(props, args) {
+    return useDropdown(props, args);
+}
+export default useEditableDropdown;

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

@@ -6,6 +6,7 @@ export interface EditableFieldPropsReturn<Request, K extends keyof Request = key
 }
 export type UseEditableFormArgs<Request, Response> = UseFormArgs<Request, Response> & {
     defaultStatus?: EditingStatus;
+    isEditable?: boolean;
     onCancel?: () => void;
     onEdit?: () => void;
     title?: string;
@@ -20,5 +21,5 @@ export interface UseEditableFormReturn<Request> extends Omit<UseFormReturn<Reque
     setStatus: React.Dispatch<React.SetStateAction<EditingStatus | null>>;
     status: EditingStatus | null;
 }
-declare function useEditableForm<Request extends object, Response = Request>({ defaultStatus, onCancel, onEdit, onSuccess, title, ...args }: UseEditableFormArgs<Request, Response>): UseEditableFormReturn<Request>;
+declare function useEditableForm<Request extends object, Response = Request>({ defaultStatus, isEditable, onCancel, onEdit, onSuccess, title, ...args }: UseEditableFormArgs<Request, Response>): UseEditableFormReturn<Request>;
 export default useEditableForm;

package/dist/forms/hooks/useEditableForm.js

@@ -1,8 +1,11 @@
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import useForm from './useForm';
-function useEditableForm({ defaultStatus, onCancel, onEdit, onSuccess, title, ...args }) {
-    const [status, setStatus] = useState(defaultStatus ?? null);
+function useEditableForm({ defaultStatus, isEditable = true, onCancel, onEdit, onSuccess, title, ...args }) {
+    const [status, setStatus] = useState(isEditable ? (defaultStatus ?? null) : null);
     async function onEditableSuccess(response) {
+        if (!isEditable) {
+            return;
+        }
         if (onSuccess) {
             await onSuccess(response);
         }
@@ -15,18 +18,27 @@ function useEditableForm({ defaultStatus, onCancel, onEdit, onSuccess, title, ..
     });
     function editableFieldProps(name, label) {
         const fieldProps = useFormReturn.fieldProps(name, label);
-        return { ...fieldProps, status };
+        return { ...fieldProps, status: isEditable ? status : null };
     }
-    useEffect(() => {
-        if (status === 'CANCELLED') {
-            useFormReturn.setErrors(null);
+    function handleCancel() {
+        if (onCancel) {
+            onCancel();
         }
-    }, [status]);
+        useFormReturn.resetForm();
+    }
     return {
         ...useFormReturn,
         actionProps: { status, setStatus },
         fieldProps: editableFieldProps,
-        formProps: { formProps: useFormReturn.formProps, onCancel, onEdit, status, setStatus, title },
+        formProps: {
+            formProps: useFormReturn.formProps,
+            isEditable,
+            onCancel: handleCancel,
+            onEdit,
+            status,
+            setStatus,
+            title,
+        },
         status,
         setStatus,
     };

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

@@ -1,17 +1,12 @@
-import type { Default, InputEvent } from '../../forms/interfaces';
+import type { Default, FormResponse, InputEvent } from '../interfaces.js';
+import type { UseSuccessArgs } from '../../hooks/useSuccess.js';
 import type { FormProps } from '../components/Form';
-interface AwaitedFormResponse<M> {
-    data: M | null;
-    error: string | null;
-    validation: Record<string, string> | null;
-}
-export type FormResponse<M> = Promise<AwaitedFormResponse<M>>;
 export interface FieldPropsReturn<Request, K extends keyof Request = keyof Request> {
     error: Record<string, string> | null;
     isDisabled?: boolean;
     label?: string;
     name: string;
-    onChange: (event: InputEvent<Request[K]>) => void;
+    onFieldChange: (event: InputEvent<Request[K]>) => void;
     value: Request[K];
 }
 export interface ToastsArgs {
@@ -19,14 +14,11 @@ export interface ToastsArgs {
     success?: string | false;
     validation?: string | false;
 }
-export interface UseFormArgs<Request, Response> {
+export interface UseFormArgs<Request, Response> extends UseSuccessArgs<Response> {
     defaults?: Default<Request>;
     onError?: (message: string) => void;
     onSubmit?: (formData: Request) => FormResponse<Response>;
-    onSuccess?: (response: Response) => Promise<void> | void;
-    onValidation?: (errors: Record<string, string>) => void;
-    redirectOnSuccess?: string | false | ((response: Response) => string | false);
-    refreshOnSuccess?: boolean;
+    onValidation?: (errors: Record<string, string>, uncaughtErrors?: Record<string, string>) => void;
     toasts?: ToastsArgs | false;
 }
 export interface UseFormReturn<Request> {
@@ -37,9 +29,10 @@ export interface UseFormReturn<Request> {
     isLoading: boolean;
     resetForm: () => void;
     setErrors: (errors: Record<string, string> | null) => void;
-    setFormData: (key: keyof Request, value: Request[keyof Request]) => void;
+    setFormData: <K extends keyof Request>(key: K, value: Request[K]) => void;
     submitForm: () => void;
 }
+export declare const DEFAULT_TOAST_MESSAGES: Record<keyof ToastsArgs, string>;
 /**
  * ## Overview
  *