@sqrzro/ui 4.0.0-alpha.7 → 4.0.0-alpha.71

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';
+import tw from '../../../styles/classnames/utility/tw';
+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 { ClassNameProps, ErrorableClassName } from '../../../styles/classnames/interfaces';
 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';
+import tw from '../../../styles/classnames/utility/tw';
 /**
  *
  * ## 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,8 +1,10 @@
-import { DropdownObject } from '../interfaces';
-import { AutocompleteFormFieldProps } from '../components/FormFields';
-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>;
 }
-declare function useAutocomplete<T extends string>(props: AutocompleteFormFieldProps<T>, { searchFn, selectFn }: UseAutocompleteArgs<T>): AutocompleteFormFieldProps<T>;
+export type UseAutocompleteReturn<T extends string> = AutocompleteFormFieldProps<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';
-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>[]>;
 }
-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.js

@@ -26,7 +26,14 @@ function useEditableForm({ defaultStatus, onCancel, onEdit, onSuccess, title, ..
         ...useFormReturn,
         actionProps: { status, setStatus },
         fieldProps: editableFieldProps,
-        formProps: { formProps: useFormReturn.formProps, onCancel, onEdit, status, setStatus, title },
+        formProps: {
+            formProps: useFormReturn.formProps,
+            onCancel,
+            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 '../../forms/interfaces';
+import type { UseSuccessArgs } from '../../hooks/useSuccess';
 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
  *

package/dist/forms/hooks/useForm.js

@@ -1,10 +1,10 @@
 'use client';
 import { useRef, useState, useTransition } from 'react';
 import { formatTitle } from '@sqrzro/utility';
-import { useRouter } from 'next/navigation';
 import useDeepCompareEffect from 'use-deep-compare-effect';
+import useSuccess from '../../hooks/useSuccess';
 import useToast from '../../hooks/useToast';
-const DEFAULT_TOAST_MESSAGES = {
+export const DEFAULT_TOAST_MESSAGES = {
     server: 'There was a problem submitting your request. Please try again later.',
     success: 'Your request was submitted successfully.',
     validation: 'There was a problem with your submission. Please check the form and try again.',
@@ -120,10 +120,12 @@ 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 router = useRouter();
-    const [isLoading, startTransition] = useTransition();
+    const ref = useRef(null);
+    const usedFields = useRef(new Set());
+    const { handleSuccess } = useSuccess({ onSuccess, redirectOnSuccess, refreshOnSuccess });
+    const [isLoading] = useTransition();
     const [errors, setErrors] = useState(null);
+    const [uncaughtErrors, setUncaughtErrors] = useState(null);
     const [data, setData] = useState(defaults);
     const { toastError, toastSuccess } = useToast();
     function setFormData(key, value) {
@@ -132,28 +134,21 @@ function useForm({ defaults = {}, onError, onSubmit, onSuccess, onValidation, re
     function handleChange(event) {
         setData((prev) => ({ ...prev, [event.target.name]: event.target.value }));
     }
-    async function handleSuccess(response) {
-        await onSuccess?.(response);
-        if (redirectOnSuccess) {
-            const redirect = typeof redirectOnSuccess === 'function'
-                ? redirectOnSuccess(response)
-                : redirectOnSuccess;
-            if (redirect) {
-                router.push(redirect);
-            }
-        }
-        if (refreshOnSuccess) {
-            router.refresh();
-        }
+    async function handleFormSuccess(response) {
+        await handleSuccess(response);
         toastSuccess(getToastMessage('success', toasts));
     }
-    function handleError(message) {
+    function handleFormError(message) {
         onError?.(message);
         toastError(getToastMessage('server', toasts));
     }
-    function handleValidation(messages) {
-        onValidation?.(messages);
+    function handleFormValidation(messages) {
+        const uncaughtMessages = Object.keys(messages)
+            .filter((key) => !usedFields.current.has(key))
+            .reduce((acc, key) => ({ ...acc, [key]: messages[key] }), {});
+        onValidation?.(messages, uncaughtMessages);
         setErrors(messages);
+        setUncaughtErrors(uncaughtMessages);
         toastError(getToastMessage('validation', toasts));
     }
     async function handleSubmit() {
@@ -163,21 +158,22 @@ function useForm({ defaults = {}, onError, onSubmit, onSuccess, onValidation, re
         setErrors(null);
         const fnReturn = await onSubmit(data);
         if (fnReturn.error) {
-            return handleError(fnReturn.error);
+            return handleFormError(fnReturn.error);
         }
         if (fnReturn.validation) {
-            return handleValidation(fnReturn.validation);
+            return handleFormValidation(fnReturn.validation);
         }
-        if (fnReturn.data) {
-            return handleSuccess(fnReturn.data);
+        if (fnReturn.data !== null) {
+            return handleFormSuccess(fnReturn.data);
         }
     }
     function fieldProps(name, label) {
+        usedFields.current.add(name);
         return {
             error: getErrorsForField(errors, name),
             label: getLabel(name, label),
             name: name,
-            onChange: handleChange,
+            onFieldChange: handleChange,
             value: data[name],
         };
     }
@@ -196,13 +192,15 @@ function useForm({ defaults = {}, onError, onSubmit, onSuccess, onValidation, re
         formData: data,
         formProps: {
             action: handleSubmit,
+            ref,
+            uncaughtErrors,
         },
         isLoading,
         resetForm,
         setErrors,
         setFormData,
         submitForm: () => {
-            setTimeout(() => innerRef.current?.requestSubmit(), 1);
+            setTimeout(() => ref.current?.requestSubmit(), 1);
         },
     };
 }

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

@@ -1,8 +1,8 @@
-import type { Action } from '../../utility/interfaces';
+import type { SimpleActionObject } from '../../utility/interfaces';
 import type { ModalFormProps } from '../components/ModalForm';
 import type { UseFormArgs, UseFormReturn } from './useForm';
 export interface UseModalFormArgs<Request, Response> extends UseFormArgs<Request, Response> {
-    actions?: Action[];
+    actions?: SimpleActionObject[];
     icon?: React.ReactNode;
     submitLabel?: string;
     title?: string;

package/dist/forms/hooks/useModalForm.js

@@ -1,19 +1,25 @@
 'use client';
+import { useState } from 'react';
 import { useRouter } from 'next/navigation';
 import useSearchParamsHref from '../../hooks/useSearchParamsHref';
-import useForm from './useForm';
+import useForm, { DEFAULT_TOAST_MESSAGES } from './useForm';
 function useModalForm({ actions, icon, submitLabel, title, ...useFormArgs }) {
+    const [serverError, setServerError] = useState(null);
     const { setSearchParamsHref } = useSearchParamsHref();
     const router = useRouter();
     function handleSuccess(response) {
         useFormArgs.onSuccess?.(response);
-        setSearchParamsHref('action', null);
+        setSearchParamsHref({ action: null, id: null });
         setTimeout(() => {
             router.refresh();
         }, 1);
     }
     const useFormReturn = useForm({
         ...useFormArgs,
+        onError: (message) => {
+            setServerError(DEFAULT_TOAST_MESSAGES.server);
+            useFormArgs.onError?.(message);
+        },
         onSuccess: handleSuccess,
         toasts: false,
     });
@@ -22,6 +28,7 @@ function useModalForm({ actions, icon, submitLabel, title, ...useFormArgs }) {
         formProps: {
             formProps: useFormReturn.formProps,
             modalProps: { actions, icon, title },
+            serverError,
             submitLabel,
         },
     };

package/dist/forms/index.d.ts

@@ -1,6 +1,8 @@
 export * from './interfaces';
 export type { AutocompleteProps } from './components/Autocomplete';
 export { default as Autocomplete } from './components/Autocomplete';
+export type { CSVInputClassNames, CSVInputProps } from './components/CSVInput';
+export { default as CSVInput } from './components/CSVInput';
 export type { DropdownClassNames, DropdownProps } from './components/Dropdown';
 export { default as Dropdown } from './components/Dropdown';
 export type { EditableFormClassNames, EditableFormProps } from './components/EditableForm';
@@ -9,26 +11,40 @@ export type { EditableFormFieldProps } from './components/EditableFormField';
 export { default as EditableFormField } from './components/EditableFormField';
 export type { FormClassNames, FormProps } from './components/Form';
 export { default as Form } from './components/Form';
+export type { FormErrorProps } from './components/FormError';
+export { default as FormError } from './components/FormError';
 export type { FormFieldClassNames, FormFieldProps } from './components/FormField';
 export { default as FormField } from './components/FormField';
 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 { PasswordComplexityProps } from './components/PasswordComplexity';
+export { default as PasswordComplexity } from './components/PasswordComplexity';
 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 { PointsInputProps } from './components/PointsInput';
+export { default as PointsInput } from './components/PointsInput';
+export type { StaticTextInputClassNames, StaticTextInputProps } from './components/StaticTextInput';
+export { default as StaticTextInput } from './components/StaticTextInput';
+export type { TextAreaClassNames, TextAreaProps } from './components/TextArea';
+export { default as TextArea } from './components/TextArea';
 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 { AutocompleteFormFieldProps, DropdownFormFieldProps, MoneyFormFieldProps, NumberFormFieldProps, PasswordFormFieldProps, TextFormFieldProps, } from './components/FormFields';
-export { AutocompleteFormField, DropdownFormField, MoneyFormField, NumberFormField, PasswordFormField, TextFormField, } from './components/FormFields';
+export type * from './components/EditableFormFields';
+export * from './components/EditableFormFields';
+export type * from './components/FormFields';
+export * from './components/FormFields';
+export type { UseAutocompleteArgs, UseAutocompleteReturn } from './hooks/useAutocomplete';
 export { default as useAutocomplete } from './hooks/useAutocomplete';
+export type { UseDropdownArgs } from './hooks/useDropdown';
 export { default as useDropdown } from './hooks/useDropdown';
+export { default as useEditableDropdown } from './hooks/useEditableDropdown';
+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,21 +1,26 @@
 export * from './interfaces';
 export { default as Autocomplete } from './components/Autocomplete';
+export { default as CSVInput } from './components/CSVInput';
 export { default as Dropdown } from './components/Dropdown';
 export { default as EditableForm } from './components/EditableForm';
 export { default as EditableFormField } from './components/EditableFormField';
 export { default as Form } from './components/Form';
+export { default as FormError } from './components/FormError';
 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 PasswordComplexity } from './components/PasswordComplexity';
 export { default as NumberInput } from './components/NumberInput';
 export { default as PasswordInput } from './components/PasswordInput';
+export { default as PointsInput } from './components/PointsInput';
+export { default as StaticTextInput } from './components/StaticTextInput';
+export { default as TextArea } from './components/TextArea';
 export { default as TextInput } from './components/TextInput';
-export { EditableDropdownFormField, EditableTextFormField } from './components/EditableFormFields';
-export { AutocompleteFormField, DropdownFormField, MoneyFormField, NumberFormField, PasswordFormField, TextFormField, } from './components/FormFields';
-// Hooks
+export * from './components/EditableFormFields';
+export * from './components/FormFields';
 export { default as useAutocomplete } from './hooks/useAutocomplete';
 export { default as useDropdown } from './hooks/useDropdown';
+export { default as useEditableDropdown } from './hooks/useEditableDropdown';
 export { default as useEditableForm } from './hooks/useEditableForm';
 export { default as useForm } from './hooks/useForm';
 export { default as useModalForm } from './hooks/useModalForm';

package/dist/forms/interfaces.d.ts

@@ -1,5 +1,11 @@
 import type { EditableFormFieldProps } from './components/EditableFormField';
 import type { FormFieldProps } from './components/FormField';
+export interface AwaitedFormResponse<M> {
+    data: M | null;
+    error: string | null;
+    validation: Record<string, string> | null;
+}
+export type FormResponse<M> = Promise<AwaitedFormResponse<M>>;
 export type Default<T> = {
     [K in keyof T]?: T[K] | null;
 };
@@ -7,7 +13,7 @@ export interface DropdownObject<T = string> {
     $data?: Record<string, string>;
     details?: string | null;
     isDisabled?: boolean;
-    label: string;
+    label: React.ReactNode;
     value: T;
 }
 export type EditingStatus = 'CANCELLED' | 'EDITING' | 'SAVED';
@@ -28,6 +34,7 @@ export interface InputProps<V, T extends V = V> {
     name: string;
     ref?: React.Ref<HTMLInputElement>;
     onChange?: (event: InputEvent<T>) => void;
+    onError?: (error: string) => void;
     onKeyDown?: React.KeyboardEventHandler;
     value?: V;
 }

package/dist/forms/utility/extract-input-props.js

@@ -13,6 +13,7 @@ export function getFieldPropKeys() {
         'label',
         'name',
         'onChange',
+        'onFieldChange',
         'onKeyDown',
         'value',
     ];

package/dist/forms/utility/format-date-value.d.ts

@@ -0,0 +1,2 @@
+declare function formatDateValue(date?: Date | [Date, Date] | null): string | null;
+export default formatDateValue;

package/dist/forms/utility/format-date-value.js

@@ -0,0 +1,13 @@
+import { formatDate } from '@sqrzro/utility';
+function formatDateValue(date) {
+    if (!date) {
+        return null;
+    }
+    const dateArray = Array.isArray(date) ? date : [date];
+    const formattedArray = dateArray.map((item) => formatDate(item));
+    if (formattedArray[0] === formattedArray[1]) {
+        return formattedArray[0];
+    }
+    return formattedArray.join(' - ');
+}
+export default formatDateValue;

package/dist/forms/utility/format-file-size.d.ts

@@ -0,0 +1,2 @@
+declare function formatFileSize(size: number): string;
+export default formatFileSize;

package/dist/forms/utility/format-file-size.js

@@ -0,0 +1,11 @@
+const BYTES_IN_KB = 1024;
+const DECIMAL_PLACES = 3;
+function formatFileSize(size) {
+    const units = ['B', 'KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB'];
+    const exponent = Math.min(Math.floor(Math.log(size) / Math.log(BYTES_IN_KB)), units.length - 1);
+    const approx = size / BYTES_IN_KB ** exponent;
+    return exponent === 0
+        ? `${size} bytes`
+        : `${approx.toFixed(DECIMAL_PLACES)} ${units[exponent]} (${size} bytes)`;
+}
+export default formatFileSize;

package/dist/forms/utility/preprocess-image.d.ts

@@ -0,0 +1,6 @@
+interface PreprocessImageOptions {
+    maxSize?: [number?, number?];
+    minSize?: [number?, number?];
+}
+export declare function preprocessImage(file: File, options?: PreprocessImageOptions): Promise<File>;
+export default preprocessImage;

package/dist/forms/utility/preprocess-image.js

@@ -0,0 +1,58 @@
+const ALLOWED_TYPES = [
+    'image/jpeg',
+    'image/png',
+    'image/gif',
+    'image/svg+xml',
+    'image/webp',
+];
+function isSupportedImage(file) {
+    return ALLOWED_TYPES.includes(file.type);
+}
+function fitWithinMaxSize(width, height, maxWidth, maxHeight) {
+    const scale = Math.min(maxWidth / width, maxHeight / height, 1);
+    return [Math.round(width * scale), Math.round(height * scale)];
+}
+export async function preprocessImage(file, options = {}) {
+    if (!isSupportedImage(file)) {
+        throw new Error('Unsupported file type');
+    }
+    if (file.type === 'image/svg+xml') {
+        return file;
+    }
+    const bitmap = await createImageBitmap(file);
+    const { maxSize, minSize } = options;
+    const maxWidth = maxSize?.[0] || 1000;
+    const maxHeight = maxSize?.[1] || 1000;
+    const minWidth = minSize?.[0] || 0;
+    const minHeight = minSize?.[1] || 0;
+    let { width, height } = bitmap;
+    if (width < minWidth || height < minHeight) {
+        throw new Error(`Image is smaller than the minimum size`);
+    }
+    const [newWidth, newHeight] = fitWithinMaxSize(width, height, maxWidth, maxHeight);
+    const canvas = document.createElement('canvas');
+    canvas.width = newWidth;
+    canvas.height = newHeight;
+    const ctx = canvas.getContext('2d');
+    if (!ctx) {
+        throw new Error('Could not get canvas context');
+    }
+    ctx.drawImage(bitmap, 0, 0, newWidth, newHeight);
+    const blob = await new Promise((resolve, reject) => {
+        canvas.toBlob((data) => {
+            if (data) {
+                resolve(data);
+            }
+            else {
+                reject(new Error('Failed to create WebP blob'));
+            }
+        }, 'image/webp', 1);
+    });
+    const baseName = file.name.replace(/\.\w+$/, '');
+    const newName = `${baseName}.webp`;
+    return new File([blob], newName, {
+        type: 'image/webp',
+        lastModified: Date.now(),
+    });
+}
+export default preprocessImage;

package/dist/hooks/index.d.ts

@@ -1 +1,4 @@
 export { default as useClickOutside } from './useClickOutside';
+export { default as useDownload } from './useDownload';
+export { default as usePopover } from './usePopover';
+export { default as useServerAction } from './useServerAction';

package/dist/hooks/index.js

@@ -1 +1,4 @@
 export { default as useClickOutside } from './useClickOutside';
+export { default as useDownload } from './useDownload';
+export { default as usePopover } from './usePopover';
+export { default as useServerAction } from './useServerAction';