@blastlabs/utils 1.11.1 → 1.12.0

package/dist/hooks/form/useCRUDForm.d.ts

@@ -0,0 +1,232 @@
+import type { FieldValues } from 'react-hook-form';
+/**
+ * CRUD Form Mode
+ */
+export type FormMode = 'create' | 'edit';
+export type UseFormReturn<TFieldValues extends Record<string, any> = Record<string, any>> = {
+    watch: (name?: any) => any;
+    getValues: (name?: any) => any;
+    setValue: (name: any, value: any, options?: {
+        shouldValidate?: boolean;
+        shouldDirty?: boolean;
+        shouldTouch?: boolean;
+    }) => void;
+    trigger?: (name?: any) => Promise<boolean>;
+    formState: {
+        errors?: Record<string, any>;
+        dirtyFields?: Record<string, any>;
+        touchedFields?: Record<string, any>;
+        isValid?: boolean;
+        isSubmitting?: boolean;
+        submitCount?: number;
+        defaultValues?: TFieldValues;
+    };
+    handleSubmit?: (...args: any[]) => any;
+    register?: (...args: any[]) => any;
+    reset?: (...args: any[]) => any;
+    [key: string]: any;
+};
+/**
+ * useCRUDForm 옵션
+ */
+export interface UseCRUDFormOptions<TData extends FieldValues = FieldValues, TId = string | number> {
+    /** 편집 모드일 때의 ID (있으면 edit mode, 없으면 create mode) */
+    id?: TId | null;
+    /** react-hook-form instance */
+    form: UseFormReturn<TData>;
+    /** 편집 모드일 때 데이터를 fetch하는 함수 */
+    fetchFn?: (id: TId) => Promise<TData>;
+    /** 생성 API 함수 */
+    createFn?: (data: TData) => Promise<any>;
+    /** 수정 API 함수 */
+    updateFn?: (id: TId, data: TData) => Promise<any>;
+    /** 삭제 API 함수 (옵션) */
+    deleteFn?: (id: TId) => Promise<any>;
+    /** 성공 시 콜백 */
+    onSuccess?: (data: TData, mode: FormMode) => void | Promise<void>;
+    /** 에러 시 콜백 */
+    onError?: (error: Error, mode: FormMode) => void;
+    /** fetch 성공 시 콜백 (편집 모드 데이터 로드 후) */
+    onFetchSuccess?: (data: TData) => void;
+    /** 데이터 변환 함수 (submit 전에 데이터를 가공) */
+    transformData?: (data: TData, mode: FormMode) => any;
+    /** 수정 모드에서 변경된 필드만 전송 (기본값: false) */
+    sendOnlyDirtyFields?: boolean;
+}
+/**
+ * useCRUDForm 반환 타입
+ */
+export interface UseCRUDFormReturn<TData = any, TId = string | number> {
+    /** 현재 폼 모드 */
+    mode: FormMode;
+    /** 편집 모드 여부 */
+    isEditMode: boolean;
+    /** 생성 모드 여부 */
+    isCreateMode: boolean;
+    /** 데이터 로딩 중 (fetch) */
+    isLoading: boolean;
+    /** Submit 중 (create/update) */
+    isSubmitting: boolean;
+    /** 삭제 중 */
+    isDeleting: boolean;
+    /** 에러 */
+    error: Error | null;
+    /** Submit 핸들러 - form.handleSubmit과 함께 사용 */
+    submit: (data: TData) => Promise<void>;
+    /** 삭제 핸들러 */
+    handleDelete: () => Promise<void>;
+    /** 로드된 원본 데이터 */
+    originalData: TData | null;
+}
+/**
+ * 생성/수정 폼의 공통 패턴을 처리하는 hook
+ *
+ * ID 존재 여부로 자동으로 create/edit 모드를 판단하고,
+ * 데이터 fetch, submit 처리를 통합 관리합니다.
+ *
+ * @example
+ * ```tsx
+ * // 기본 사용
+ * function UserForm({ userId }: { userId?: string }) {
+ *   const form = useForm<User>({
+ *     defaultValues: {
+ *       name: '',
+ *       email: '',
+ *     }
+ *   });
+ *
+ *   const {
+ *     mode,
+ *     isLoading,
+ *     isSubmitting,
+ *     submit,
+ *   } = useCRUDForm({
+ *     id: userId,
+ *     form,
+ *     fetchFn: (id) => api.getUser(id),
+ *     createFn: (data) => api.createUser(data),
+ *     updateFn: (id, data) => api.updateUser(id, data),
+ *     onSuccess: (data, mode) => {
+ *       toast.success(mode === 'create' ? '생성 완료' : '수정 완료');
+ *       navigate('/users');
+ *     },
+ *   });
+ *
+ *   if (isLoading) return <div>Loading...</div>;
+ *
+ *   return (
+ *     <form onSubmit={form.handleSubmit(submit)}>
+ *       <input {...form.register('name')} />
+ *       <input {...form.register('email')} />
+ *       <button type="submit" disabled={isSubmitting}>
+ *         {mode === 'create' ? '생성' : '수정'}
+ *       </button>
+ *     </form>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // 삭제 기능 포함
+ * function UserForm({ userId }: { userId?: string }) {
+ *   const form = useForm<User>();
+ *
+ *   const {
+ *     mode,
+ *     isLoading,
+ *     isSubmitting,
+ *     isDeleting,
+ *     submit,
+ *     handleDelete,
+ *   } = useCRUDForm({
+ *     id: userId,
+ *     form,
+ *     fetchFn: (id) => api.getUser(id),
+ *     createFn: (data) => api.createUser(data),
+ *     updateFn: (id, data) => api.updateUser(id, data),
+ *     deleteFn: (id) => api.deleteUser(id),
+ *     onSuccess: (data, mode) => {
+ *       navigate('/users');
+ *     },
+ *   });
+ *
+ *   return (
+ *     <form onSubmit={form.handleSubmit(submit)}>
+ *       <input {...form.register('name')} />
+ *       <button type="submit" disabled={isSubmitting}>
+ *         {isSubmitting ? '처리중...' : mode === 'create' ? '생성' : '수정'}
+ *       </button>
+ *       {mode === 'edit' && (
+ *         <button type="button" onClick={handleDelete} disabled={isDeleting}>
+ *           {isDeleting ? '삭제중...' : '삭제'}
+ *         </button>
+ *       )}
+ *     </form>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // 데이터 변환 사용
+ * function PostForm({ postId }: { postId?: string }) {
+ *   const form = useForm<PostFormData>();
+ *
+ *   const { mode, isLoading, submit } = useCRUDForm({
+ *     id: postId,
+ *     form,
+ *     fetchFn: async (id) => {
+ *       const post = await api.getPost(id);
+ *       // API 응답을 폼 형식으로 변환
+ *       return {
+ *         ...post,
+ *         tags: post.tags.join(', '), // 배열 -> 문자열
+ *       };
+ *     },
+ *     createFn: (data) => api.createPost(data),
+ *     updateFn: (id, data) => api.updatePost(id, data),
+ *     transformData: (data, mode) => {
+ *       // Submit 전에 폼 데이터를 API 형식으로 변환
+ *       return {
+ *         ...data,
+ *         tags: data.tags.split(',').map(t => t.trim()), // 문자열 -> 배열
+ *       };
+ *     },
+ *   });
+ *
+ *   return <form onSubmit={form.handleSubmit(submit)}>...</form>;
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // 변경된 필드만 전송 (PATCH 방식)
+ * function UserProfileForm({ userId }: { userId: string }) {
+ *   const form = useForm<UserProfile>();
+ *
+ *   const { mode, isLoading, submit } = useCRUDForm({
+ *     id: userId,
+ *     form,
+ *     fetchFn: (id) => api.getUser(id),
+ *     updateFn: (id, data) => api.patchUser(id, data), // PATCH API
+ *     sendOnlyDirtyFields: true, // 변경된 필드만 전송
+ *     onSuccess: () => {
+ *       toast.success('프로필이 업데이트되었습니다');
+ *     },
+ *   });
+ *
+ *   // 예: 사용자가 name만 수정하면 { name: "새이름" }만 전송됨
+ *   return (
+ *     <form onSubmit={form.handleSubmit(submit)}>
+ *       <input {...form.register('name')} />
+ *       <input {...form.register('email')} />
+ *       <input {...form.register('phone')} />
+ *       <button type="submit">저장</button>
+ *     </form>
+ *   );
+ * }
+ * ```
+ */
+export declare function useCRUDForm<TData extends FieldValues = FieldValues, TId = string | number>(options: UseCRUDFormOptions<TData, TId>): UseCRUDFormReturn<TData, TId>;
+//# sourceMappingURL=useCRUDForm.d.ts.map

package/dist/hooks/form/useCRUDForm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCRUDForm.d.ts","sourceRoot":"","sources":["../../../src/hooks/form/useCRUDForm.ts"],"names":[],"mappings":"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"}

package/dist/hooks/form/useCRUDForm.js

@@ -0,0 +1,287 @@
+import { useState, useEffect, useCallback } from 'react';
+/**
+ * dirtyFields를 기반으로 변경된 필드만 추출하는 헬퍼 함수
+ */
+function extractDirtyFields(data, dirtyFields) {
+    const result = {};
+    Object.keys(dirtyFields).forEach((key) => {
+        const dirtyValue = dirtyFields[key];
+        if (dirtyValue === true) {
+            // 최종 필드인 경우
+            result[key] = data[key];
+        }
+        else if (typeof dirtyValue === 'object' && dirtyValue !== null && !Array.isArray(dirtyValue)) {
+            // 중첩된 객체인 경우 재귀적으로 처리
+            if (data[key] && typeof data[key] === 'object') {
+                result[key] = extractDirtyFields(data[key], dirtyValue);
+            }
+        }
+        else if (dirtyValue === true || Array.isArray(dirtyValue)) {
+            // 배열이거나 true인 경우
+            result[key] = data[key];
+        }
+    });
+    return result;
+}
+/**
+ * 생성/수정 폼의 공통 패턴을 처리하는 hook
+ *
+ * ID 존재 여부로 자동으로 create/edit 모드를 판단하고,
+ * 데이터 fetch, submit 처리를 통합 관리합니다.
+ *
+ * @example
+ * ```tsx
+ * // 기본 사용
+ * function UserForm({ userId }: { userId?: string }) {
+ *   const form = useForm<User>({
+ *     defaultValues: {
+ *       name: '',
+ *       email: '',
+ *     }
+ *   });
+ *
+ *   const {
+ *     mode,
+ *     isLoading,
+ *     isSubmitting,
+ *     submit,
+ *   } = useCRUDForm({
+ *     id: userId,
+ *     form,
+ *     fetchFn: (id) => api.getUser(id),
+ *     createFn: (data) => api.createUser(data),
+ *     updateFn: (id, data) => api.updateUser(id, data),
+ *     onSuccess: (data, mode) => {
+ *       toast.success(mode === 'create' ? '생성 완료' : '수정 완료');
+ *       navigate('/users');
+ *     },
+ *   });
+ *
+ *   if (isLoading) return <div>Loading...</div>;
+ *
+ *   return (
+ *     <form onSubmit={form.handleSubmit(submit)}>
+ *       <input {...form.register('name')} />
+ *       <input {...form.register('email')} />
+ *       <button type="submit" disabled={isSubmitting}>
+ *         {mode === 'create' ? '생성' : '수정'}
+ *       </button>
+ *     </form>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // 삭제 기능 포함
+ * function UserForm({ userId }: { userId?: string }) {
+ *   const form = useForm<User>();
+ *
+ *   const {
+ *     mode,
+ *     isLoading,
+ *     isSubmitting,
+ *     isDeleting,
+ *     submit,
+ *     handleDelete,
+ *   } = useCRUDForm({
+ *     id: userId,
+ *     form,
+ *     fetchFn: (id) => api.getUser(id),
+ *     createFn: (data) => api.createUser(data),
+ *     updateFn: (id, data) => api.updateUser(id, data),
+ *     deleteFn: (id) => api.deleteUser(id),
+ *     onSuccess: (data, mode) => {
+ *       navigate('/users');
+ *     },
+ *   });
+ *
+ *   return (
+ *     <form onSubmit={form.handleSubmit(submit)}>
+ *       <input {...form.register('name')} />
+ *       <button type="submit" disabled={isSubmitting}>
+ *         {isSubmitting ? '처리중...' : mode === 'create' ? '생성' : '수정'}
+ *       </button>
+ *       {mode === 'edit' && (
+ *         <button type="button" onClick={handleDelete} disabled={isDeleting}>
+ *           {isDeleting ? '삭제중...' : '삭제'}
+ *         </button>
+ *       )}
+ *     </form>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // 데이터 변환 사용
+ * function PostForm({ postId }: { postId?: string }) {
+ *   const form = useForm<PostFormData>();
+ *
+ *   const { mode, isLoading, submit } = useCRUDForm({
+ *     id: postId,
+ *     form,
+ *     fetchFn: async (id) => {
+ *       const post = await api.getPost(id);
+ *       // API 응답을 폼 형식으로 변환
+ *       return {
+ *         ...post,
+ *         tags: post.tags.join(', '), // 배열 -> 문자열
+ *       };
+ *     },
+ *     createFn: (data) => api.createPost(data),
+ *     updateFn: (id, data) => api.updatePost(id, data),
+ *     transformData: (data, mode) => {
+ *       // Submit 전에 폼 데이터를 API 형식으로 변환
+ *       return {
+ *         ...data,
+ *         tags: data.tags.split(',').map(t => t.trim()), // 문자열 -> 배열
+ *       };
+ *     },
+ *   });
+ *
+ *   return <form onSubmit={form.handleSubmit(submit)}>...</form>;
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // 변경된 필드만 전송 (PATCH 방식)
+ * function UserProfileForm({ userId }: { userId: string }) {
+ *   const form = useForm<UserProfile>();
+ *
+ *   const { mode, isLoading, submit } = useCRUDForm({
+ *     id: userId,
+ *     form,
+ *     fetchFn: (id) => api.getUser(id),
+ *     updateFn: (id, data) => api.patchUser(id, data), // PATCH API
+ *     sendOnlyDirtyFields: true, // 변경된 필드만 전송
+ *     onSuccess: () => {
+ *       toast.success('프로필이 업데이트되었습니다');
+ *     },
+ *   });
+ *
+ *   // 예: 사용자가 name만 수정하면 { name: "새이름" }만 전송됨
+ *   return (
+ *     <form onSubmit={form.handleSubmit(submit)}>
+ *       <input {...form.register('name')} />
+ *       <input {...form.register('email')} />
+ *       <input {...form.register('phone')} />
+ *       <button type="submit">저장</button>
+ *     </form>
+ *   );
+ * }
+ * ```
+ */
+export function useCRUDForm(options) {
+    const { id, form, fetchFn, createFn, updateFn, deleteFn, onSuccess, onError, onFetchSuccess, transformData, sendOnlyDirtyFields = false, } = options;
+    const mode = id ? 'edit' : 'create';
+    const isEditMode = mode === 'edit';
+    const isCreateMode = mode === 'create';
+    const [isLoading, setIsLoading] = useState(false);
+    const [isSubmitting, setIsSubmitting] = useState(false);
+    const [isDeleting, setIsDeleting] = useState(false);
+    const [error, setError] = useState(null);
+    const [originalData, setOriginalData] = useState(null);
+    // 편집 모드일 때 데이터 fetch
+    useEffect(() => {
+        if (isEditMode && id && fetchFn) {
+            const fetchData = async () => {
+                setIsLoading(true);
+                setError(null);
+                try {
+                    const data = await fetchFn(id);
+                    setOriginalData(data);
+                    form.reset?.(data);
+                    onFetchSuccess?.(data);
+                }
+                catch (err) {
+                    const error = err instanceof Error ? err : new Error('Failed to fetch data');
+                    setError(error);
+                    onError?.(error, mode);
+                }
+                finally {
+                    setIsLoading(false);
+                }
+            };
+            fetchData();
+        }
+    }, [id, isEditMode]);
+    // Submit 핸들러
+    const submit = useCallback(async (data) => {
+        setIsSubmitting(true);
+        setError(null);
+        try {
+            // 수정 모드이고 sendOnlyDirtyFields가 true면 변경된 필드만 추출
+            let dataToSubmit = data;
+            if (isEditMode && sendOnlyDirtyFields && form.formState.dirtyFields) {
+                dataToSubmit = extractDirtyFields(data, form.formState.dirtyFields);
+            }
+            // 데이터 변환 (있으면)
+            const submitData = transformData ? transformData(dataToSubmit, mode) : dataToSubmit;
+            let result;
+            if (isCreateMode) {
+                if (!createFn) {
+                    throw new Error('createFn is required for create mode');
+                }
+                result = await createFn(submitData);
+            }
+            else {
+                if (!updateFn) {
+                    throw new Error('updateFn is required for edit mode');
+                }
+                if (!id) {
+                    throw new Error('id is required for edit mode');
+                }
+                result = await updateFn(id, submitData);
+            }
+            await onSuccess?.(data, mode);
+            return result;
+        }
+        catch (err) {
+            const error = err instanceof Error ? err : new Error('Failed to submit form');
+            setError(error);
+            onError?.(error, mode);
+            throw error;
+        }
+        finally {
+            setIsSubmitting(false);
+        }
+    }, [mode, isCreateMode, isEditMode, createFn, updateFn, id, transformData, sendOnlyDirtyFields, form.formState.dirtyFields, onSuccess, onError]);
+    // 삭제 핸들러
+    const handleDelete = useCallback(async () => {
+        if (!isEditMode || !id) {
+            throw new Error('Delete is only available in edit mode');
+        }
+        if (!deleteFn) {
+            throw new Error('deleteFn is required for delete operation');
+        }
+        setIsDeleting(true);
+        setError(null);
+        try {
+            await deleteFn(id);
+            await onSuccess?.(originalData, mode);
+        }
+        catch (err) {
+            const error = err instanceof Error ? err : new Error('Failed to delete');
+            setError(error);
+            onError?.(error, mode);
+            throw error;
+        }
+        finally {
+            setIsDeleting(false);
+        }
+    }, [isEditMode, id, deleteFn, originalData, mode, onSuccess, onError]);
+    return {
+        mode,
+        isEditMode,
+        isCreateMode,
+        isLoading,
+        isSubmitting,
+        isDeleting,
+        error,
+        submit,
+        handleDelete,
+        originalData,
+    };
+}

package/dist/hooks/index.d.ts

@@ -1,19 +1,14 @@
 /**
- * React Hooks
+ * React Hooks Collection
  *
- * This module provides React hooks for common use cases.
+ * 카테고리별로 정리된 유용한 React hooks 모음입니다.
  * Note: Requires React as a peer dependency.
  */
-export * from './useLocalStorage';
-export * from './useSessionStorage';
-export * from './useMediaQuery';
-export * from './useClickOutside';
-export * from './useDebounce';
-export * from './useToggle';
-export * from './useCopyToClipboard';
-export * from './useWindowSize';
-export * from './usePrevious';
-export * from './useThrottle';
-export * from './useIntersectionObserver';
-export * from './useEventListener';
+export * from './state';
+export * from './performance';
+export * from './event';
+export * from './time';
+export * from './form';
+export * from './ui';
+export * from './storage';
 //# sourceMappingURL=index.d.ts.map

package/dist/hooks/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AAGpC,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAGlC,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,sBAAsB,CAAC;AACrC,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAG9B,cAAc,eAAe,CAAC;AAC9B,cAAc,2BAA2B,CAAC;AAG1C,cAAc,oBAAoB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,cAAc,SAAS,CAAC;AAGxB,cAAc,eAAe,CAAC;AAG9B,cAAc,SAAS,CAAC;AAGxB,cAAc,QAAQ,CAAC;AAGvB,cAAc,QAAQ,CAAC;AAGvB,cAAc,MAAM,CAAC;AAGrB,cAAc,WAAW,CAAC"}

package/dist/hooks/index.js

@@ -1,23 +1,20 @@
 /**
- * React Hooks
+ * React Hooks Collection
  *
- * This module provides React hooks for common use cases.
+ * 카테고리별로 정리된 유용한 React hooks 모음입니다.
  * Note: Requires React as a peer dependency.
  */
-// Storage hooks
-export * from './useLocalStorage';
-export * from './useSessionStorage';
-// UI/UX hooks
-export * from './useMediaQuery';
-export * from './useClickOutside';
-// Utility hooks
-export * from './useDebounce';
-export * from './useToggle';
-export * from './useCopyToClipboard';
-export * from './useWindowSize';
-export * from './usePrevious';
-// Performance hooks
-export * from './useThrottle';
-export * from './useIntersectionObserver';
-// Event hooks
-export * from './useEventListener';
+// State Management
+export * from './state';
+// Performance Optimization
+export * from './performance';
+// Event Handling
+export * from './event';
+// Time-related
+export * from './time';
+// Form Management
+export * from './form';
+// UI/UX
+export * from './ui';
+// Storage
+export * from './storage';

package/dist/hooks/performance/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Performance Optimization Hooks
+ */
+export * from './useThrottle';
+export * from './useDebounce';
+export * from './useIntersectionObserver';
+//# sourceMappingURL=index.d.ts.map

package/dist/hooks/performance/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/performance/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,2BAA2B,CAAC"}

package/dist/hooks/performance/index.js

@@ -0,0 +1,6 @@
+/**
+ * Performance Optimization Hooks
+ */
+export * from './useThrottle';
+export * from './useDebounce';
+export * from './useIntersectionObserver';

package/dist/hooks/performance/useDebounce.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDebounce.d.ts","sourceRoot":"","sources":["../../../src/hooks/performance/useDebounce.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,wBAAgB,WAAW,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,KAAK,GAAE,MAAY,GAAG,CAAC,CAgB/D"}

package/dist/hooks/performance/useIntersectionObserver.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIntersectionObserver.d.ts","sourceRoot":"","sources":["../../../src/hooks/performance/useIntersectionObserver.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuB,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD;;GAEG;AACH,MAAM,WAAW,8BAA+B,SAAQ,wBAAwB;IAC9E,+CAA+C;IAC/C,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8EG;AACH,wBAAgB,uBAAuB,CACrC,GAAG,EAAE,SAAS,CAAC,OAAO,CAAC,EACvB,OAAO,GAAE,8BAAmC,GAC3C,yBAAyB,GAAG,SAAS,CAoCvC;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,YAAY,CAC1B,GAAG,EAAE,SAAS,CAAC,OAAO,CAAC,EACvB,OAAO,CAAC,EAAE,8BAA8B,GACvC,OAAO,CAGT"}

package/dist/hooks/performance/useThrottle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useThrottle.d.ts","sourceRoot":"","sources":["../../../src/hooks/performance/useThrottle.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsDG;AACH,wBAAgB,WAAW,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,QAAQ,GAAE,MAAY,GAAG,CAAC,CA0BlE"}

package/dist/hooks/state/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * State Management Hooks
+ */
+export * from './useToggle';
+export * from './usePrevious';
+//# sourceMappingURL=index.d.ts.map

package/dist/hooks/state/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/state/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC"}

package/dist/hooks/state/index.js

@@ -0,0 +1,5 @@
+/**
+ * State Management Hooks
+ */
+export * from './useToggle';
+export * from './usePrevious';

package/dist/hooks/state/usePrevious.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePrevious.d.ts","sourceRoot":"","sources":["../../../src/hooks/state/usePrevious.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuDG;AACH,wBAAgB,WAAW,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,GAAG,CAAC,GAAG,SAAS,CAWtD"}

package/dist/hooks/state/useToggle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useToggle.d.ts","sourceRoot":"","sources":["../../../src/hooks/state/useToggle.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8CG;AACH,wBAAgB,SAAS,CACvB,YAAY,GAAE,OAAe,GAC5B,CAAC,OAAO,EAAE,MAAM,IAAI,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC,CASjD"}

package/dist/hooks/storage/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Storage Hooks
+ */
+export * from './useLocalStorage';
+export * from './useSessionStorage';
+export * from './useCopyToClipboard';
+//# sourceMappingURL=index.d.ts.map

package/dist/hooks/storage/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/storage/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC"}