@sqrzro/ui 4.0.0-alpha.6 → 4.0.0-alpha.61

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,4 +1,5 @@
 import type { Default, InputEvent } from '../../forms/interfaces';
+import type { UseSuccessArgs } from '../../hooks/useSuccess';
 import type { FormProps } from '../components/Form';
 interface AwaitedFormResponse<M> {
     data: M | null;
@@ -11,7 +12,7 @@ export interface FieldPropsReturn<Request, K extends keyof Request = keyof Reque
     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 +20,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 +35,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,8 +1,10 @@
 '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) {
@@ -14,6 +16,10 @@ function useModalForm({ actions, icon, submitLabel, title, ...useFormArgs }) {
     }
     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

@@ -7,7 +7,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';

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/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';
+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';
+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,10 @@
+import type { UseSuccessArgs } from './useSuccess';
+interface UseServerActionArgs<Response> extends UseSuccessArgs<Response> {
+    onSuccess?: (response: Response) => void;
+}
+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,17 @@
+import { useTransition } from 'react';
+import useSuccess from './useSuccess';
+function useServerAction(fn, args = {}) {
+    const { handleSuccess } = useSuccess(args);
+    const [isLoading, startTransition] = useTransition();
+    function handleClick() {
+        startTransition(async () => {
+            if (!fn) {
+                return;
+            }
+            const response = await fn();
+            await handleSuccess(response);
+        });
+    }
+    return { handleClick, isLoading };
+}
+export default useServerAction;

package/dist/hooks/useSuccess.d.ts

@@ -0,0 +1,10 @@
+export interface UseSuccessArgs<Response> {
+    onSuccess?: (response: Response) => Promise<void> | void;
+    redirectOnSuccess?: string | false | ((response: Response) => Promise<string | false> | string | false);
+    refreshOnSuccess?: boolean;
+}
+interface UseSuccessReturn<Response> {
+    handleSuccess: (response: Response) => Promise<void>;
+}
+declare function useSuccess<Response>({ onSuccess, redirectOnSuccess, refreshOnSuccess, }: UseSuccessArgs<Response>): UseSuccessReturn<Response>;
+export default useSuccess;