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

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 useToast from '../../hooks/useToast';
-const DEFAULT_TOAST_MESSAGES = {
+import useSuccess from '../../hooks/useSuccess.js';
+import useToast from '../../hooks/useToast.js';
+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],
         };
     }
@@ -185,6 +181,7 @@ function useForm({ defaults = {}, onError, onSubmit, onSuccess, onValidation, re
         setTimeout(() => {
             setData((defaults || {}));
             setErrors(null);
+            setUncaughtErrors(null);
         }, 1);
     }
     useDeepCompareEffect(() => {
@@ -196,13 +193,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.js';
 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 useSearchParamsHref from '../../hooks/useSearchParamsHref.js';
+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,28 +11,37 @@ 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, UseDropdownReturn } from './hooks/useDropdown';
+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';

package/dist/forms/index.js

@@ -1,20 +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';
+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';
@@ -25,9 +31,11 @@ export interface InputProps<V, T extends V = V> {
     hasError?: boolean;
     id?: string;
     isDisabled?: boolean;
+    isReadOnly?: boolean;
     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,9 @@
+export type ImageTypeKey = 'jpg' | 'png' | 'gif' | 'svg' | 'webp';
+interface PreprocessImageOptions {
+    accept?: ImageTypeKey[];
+    format?: ImageTypeKey;
+    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,61 @@
+const DEFAULT_FORMAT = 'webp';
+const DEFAULT_ACCEPT = ['jpg', 'png', 'gif', 'svg', 'webp'];
+const imageTypeMap = {
+    jpg: 'image/jpeg',
+    png: 'image/png',
+    gif: 'image/gif',
+    svg: 'image/svg+xml',
+    webp: 'image/webp',
+};
+function isAccepted(file, accept = DEFAULT_ACCEPT) {
+    return accept.map((key) => imageTypeMap[key]).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 (!isAccepted(file, options.accept)) {
+        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 format = options.format || DEFAULT_FORMAT;
+    const blob = await new Promise((resolve, reject) => {
+        canvas.toBlob((data) => {
+            if (data) {
+                resolve(data);
+            }
+            else {
+                reject(new Error(`Failed to create ${format.toUpperCase()} blob`));
+            }
+        }, imageTypeMap[format], 1);
+    });
+    const baseName = file.name.replace(/\.\w+$/, '');
+    const newName = `${baseName}.${format}`;
+    return new File([blob], newName, {
+        type: imageTypeMap[format],
+        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';

package/dist/hooks/useConfirmable.d.ts

@@ -0,0 +1,21 @@
+import type { ActionEvent } from '../utility/interfaces.js';
+interface UseConfirmableArgs {
+    isLoading?: boolean;
+    onBeforeConfirm?: () => void;
+    onConfirm: (event: ActionEvent, currentRef: HTMLButtonElement | null) => void;
+    onSuccess?: () => Promise<void> | void;
+    redirectOnSuccess?: string | false | ((response: Response) => string | false);
+    refreshOnSuccess?: boolean;
+}
+interface UseConfirmableReturn {
+    handle: (event?: ActionEvent) => void;
+    isOpen: boolean;
+    modalProps: {
+        isLoading: boolean;
+        onCancel: () => void;
+        onConfirm: () => void;
+    };
+    ref: React.RefObject<HTMLButtonElement | null>;
+}
+declare function useConfirmable({ isLoading, onBeforeConfirm, onConfirm, onSuccess, redirectOnSuccess, refreshOnSuccess, }: Readonly<UseConfirmableArgs>): UseConfirmableReturn;
+export default useConfirmable;

package/dist/hooks/useConfirmable.js

@@ -0,0 +1,58 @@
+'use client';
+import { useEffect, useRef, useState } from 'react';
+import { useRouter } from 'next/navigation';
+function useConfirmable({ isLoading, onBeforeConfirm, onConfirm, onSuccess, redirectOnSuccess, refreshOnSuccess, }) {
+    const ref = useRef(null);
+    const router = useRouter();
+    const [isModalOpen, setIsModalOpen] = useState(false);
+    const [isConfirmed, setIsConfirmed] = useState(false);
+    const [refEvent, setRefEvent] = useState();
+    function handle(event) {
+        onBeforeConfirm?.();
+        if (!isConfirmed) {
+            event?.preventDefault();
+            setIsModalOpen(true);
+        }
+        setRefEvent(event);
+        setIsConfirmed(false);
+    }
+    function handleConfirm() {
+        setIsConfirmed(true);
+        setTimeout(() => {
+            if (refEvent) {
+                onConfirm(refEvent, ref.current);
+            }
+            // If `isLoading` hasn't been set, we can just close the modal now. If it has, by
+            // setting `isConfirmed` to true above, we trigger the useEffect below to wait until
+            // after loading to close the modal.
+            if (typeof isLoading === 'undefined') {
+                setIsConfirmed(false);
+                setIsModalOpen(false);
+            }
+        }, 0);
+    }
+    function handleCancel() {
+        setIsModalOpen(false);
+    }
+    function handleSuccess() {
+        setIsConfirmed(false);
+        setIsModalOpen(false);
+        router.refresh();
+    }
+    useEffect(() => {
+        if (!isLoading && isConfirmed) {
+            handleSuccess();
+        }
+    }, [isLoading]);
+    return {
+        handle,
+        isOpen: isModalOpen,
+        modalProps: {
+            isLoading: isLoading ?? false,
+            onCancel: handleCancel,
+            onConfirm: handleConfirm,
+        },
+        ref,
+    };
+}
+export default useConfirmable;

package/dist/hooks/useDownload.d.ts

@@ -0,0 +1,2 @@
+declare function useDownload(): (data: Blob | string, filename: string) => void;
+export default useDownload;

package/dist/hooks/useDownload.js

@@ -0,0 +1,18 @@
+function download(data, filename) {
+    const href = typeof data === 'string' ? data : URL.createObjectURL(data);
+    // Create a temporary link element to trigger the download
+    const link = document.createElement('a');
+    link.href = href;
+    link.download = filename;
+    document.body.appendChild(link);
+    link.click();
+    // Clean up
+    document.body.removeChild(link);
+    if (typeof data !== 'string') {
+        URL.revokeObjectURL(href);
+    }
+}
+function useDownload() {
+    return download;
+}
+export default useDownload;

package/dist/hooks/usePopover.d.ts

@@ -0,0 +1,12 @@
+interface UsePopoverReturn<T extends HTMLElement = HTMLElement> {
+    controlProps: {
+        onClick: () => void;
+    };
+    isOpen: boolean;
+    ref: React.RefObject<T | null>;
+    targetProps: {
+        isOpen: boolean;
+    };
+}
+declare function usePopover<T extends HTMLElement = HTMLElement>(): UsePopoverReturn<T>;
+export default usePopover;

package/dist/hooks/usePopover.js

@@ -0,0 +1,24 @@
+import { useEffect } from 'react';
+import useClickOutside from './useClickOutside';
+import { usePathname } from 'next/navigation';
+function usePopover() {
+    const pathname = usePathname();
+    const [isOpen, setIsOpen, ref] = useClickOutside();
+    function toggleIsOpen() {
+        setIsOpen(!isOpen);
+    }
+    useEffect(() => {
+        setIsOpen(false);
+    }, [pathname]);
+    return {
+        controlProps: {
+            onClick: toggleIsOpen,
+        },
+        isOpen,
+        ref,
+        targetProps: {
+            isOpen,
+        },
+    };
+}
+export default usePopover;

package/dist/hooks/useSelected.d.ts

@@ -0,0 +1,12 @@
+import type { InputEvent } from '../forms/interfaces.js';
+interface UseSelectedReturn {
+    checkSelected: (id: string) => boolean;
+    isAllSelected: boolean;
+    onSelect: (event: InputEvent<boolean>) => void;
+    onSelectAll: () => void;
+    selected: string[];
+}
+declare function useSelected(data: {
+    id: string;
+}[]): UseSelectedReturn;
+export default useSelected;

package/dist/hooks/useSelected.js

@@ -0,0 +1,35 @@
+import { toggleArrayItem } from '@sqrzro/utility';
+import { useSearchParams } from 'next/navigation';
+import useSearchParamsHref from './useSearchParamsHref';
+function getSelectedFromSearchParams(searchParams) {
+    const selected = searchParams.get('selected');
+    return selected ? selected.split('|') : [];
+}
+function setSelectedToSearchParams(selected) {
+    return selected.length ? selected.join('|') : null;
+}
+function useSelected(data) {
+    const { setSearchParamsHref } = useSearchParamsHref();
+    const searchParams = useSearchParams();
+    const selected = getSelectedFromSearchParams(searchParams);
+    function onSelect(event) {
+        const value = toggleArrayItem(selected, event.target.name);
+        setSearchParamsHref({ selected: setSelectedToSearchParams(value) });
+    }
+    function onSelectAll() {
+        const value = selected.length === data.length ? [] : data.map((item) => item.id);
+        setSearchParamsHref({ selected: setSelectedToSearchParams(value) });
+    }
+    const isAllSelected = data.length > 0 && selected.length === data.length;
+    function checkSelected(id) {
+        return selected.includes(id);
+    }
+    return {
+        checkSelected,
+        isAllSelected,
+        onSelect,
+        onSelectAll,
+        selected,
+    };
+}
+export default useSelected;

package/dist/hooks/useServerAction.d.ts

@@ -0,0 +1,14 @@
+import type { UseSuccessArgs } from './useSuccess';
+export interface ToastsArgs {
+    error?: string | false;
+    success?: string | false;
+}
+interface UseServerActionArgs<Response> extends UseSuccessArgs<Response> {
+    toasts?: ToastsArgs | false;
+}
+interface UseServerActionReturn {
+    handleClick: () => void;
+    isLoading: boolean;
+}
+declare function useServerAction<Response>(fn?: () => Promise<Response>, args?: UseServerActionArgs<Response>): UseServerActionReturn;
+export default useServerAction;

package/dist/hooks/useServerAction.js

@@ -0,0 +1,30 @@
+import { useTransition } from 'react';
+import useSuccess from './useSuccess';
+import useToast from './useToast';
+const DEFAULT_TOAST_MESSAGES = {
+    error: 'There was a problem submitting your request. Please try again later.',
+    success: 'Your request was submitted successfully.',
+};
+function getToastMessage(key, toasts) {
+    if (toasts === false || toasts?.[key] === false) {
+        return '';
+    }
+    return toasts?.[key] || DEFAULT_TOAST_MESSAGES[key];
+}
+function useServerAction(fn, args = {}) {
+    const { handleSuccess } = useSuccess(args);
+    const { toastSuccess } = useToast();
+    const [isLoading, startTransition] = useTransition();
+    function handleClick() {
+        startTransition(async () => {
+            if (!fn) {
+                return;
+            }
+            const response = await fn();
+            await handleSuccess(response);
+            toastSuccess(getToastMessage('success', args.toasts));
+        });
+    }
+    return { handleClick, isLoading };
+}
+export default useServerAction;