@blastlabs/utils 1.11.0

package/dist/components/dev/FormDevTools/FormDevTools.d.ts

@@ -0,0 +1,136 @@
+import React from 'react';
+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;
+};
+export type Props = {
+    /** react-hook-form의 useForm() 반환값을 그대로 전달 */
+    form: UseFormReturn;
+    /** Mock 데이터 생성 함수 (비동기 가능) */
+    generateMock?: (params: {
+        values?: Record<string, any>;
+        originalValues?: Record<string, any>;
+    }) => Promise<Record<string, any>> | Record<string, any>;
+    /** Validation 스키마 정보 (zod, yup 등) - 선택사항 */
+    validationSchema?: Record<string, any>;
+    /** 표시 위치 (기본값: 'bottom-left') */
+    position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+    /** 패널 제목 (기본값: 'Form DevTools') */
+    title?: string;
+};
+/**
+ * react-hook-form의 상태를 실시간으로 시각화하는 개발용 컴포넌트
+ * form의 values, errors, dirtyFields, touchedFields 등을 한눈에 확인할 수 있습니다.
+ *
+ * @example
+ * ```tsx
+ * // Vite 프로젝트 - 간단한 사용법
+ * import { useForm } from 'react-hook-form';
+ * import { FormDevTools } from 'goodchuck-utils/components/dev';
+ *
+ * function MyForm() {
+ *   const form = useForm({
+ *     defaultValues: {
+ *       username: '',
+ *       email: '',
+ *       age: 0,
+ *     }
+ *   });
+ *
+ *   return (
+ *     <form onSubmit={form.handleSubmit(onSubmit)}>
+ *       <input {...form.register('username')} />
+ *       <input {...form.register('email')} />
+ *       <button type="submit">Submit</button>
+ *
+ *       {import.meta.env.DEV && <FormDevTools form={form} />}
+ *     </form>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Mock 데이터 생성 기능 포함
+ * function MyForm() {
+ *   const form = useForm({
+ *     defaultValues: {
+ *       username: '',
+ *       email: '',
+ *       age: 0,
+ *     }
+ *   });
+ *
+ *   return (
+ *     <form onSubmit={form.handleSubmit(onSubmit)}>
+ *       <input {...form.register('username')} />
+ *       <input {...form.register('email')} />
+ *       <button type="submit">Submit</button>
+ *
+ *       {import.meta.env.DEV && (
+ *         <FormDevTools
+ *           form={form}
+ *           generateMock={async ({ values, originalValues }) => {
+ *             // Mock 데이터 생성 로직
+ *             return {
+ *               username: 'test_user',
+ *               email: 'test@example.com',
+ *               age: 25,
+ *             };
+ *           }}
+ *         />
+ *       )}
+ *     </form>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // 수정 폼 예시
+ * function EditForm({ userData }) {
+ *   const form = useForm();
+ *
+ *   useEffect(() => {
+ *     form.reset(userData);
+ *   }, [userData]);
+ *
+ *   return (
+ *     <form onSubmit={form.handleSubmit(onSubmit)}>
+ *       <input {...form.register('username')} />
+ *       <input {...form.register('email')} />
+ *       <button type="submit">Update</button>
+ *
+ *       {process.env.NODE_ENV === 'development' && (
+ *         <FormDevTools
+ *           form={form}
+ *           position="top-right"
+ *           title="Edit Form Debug"
+ *         />
+ *       )}
+ *     </form>
+ *   );
+ * }
+ * ```
+ */
+export default function FormDevTools({ form, validationSchema, generateMock, position, title }: Props): React.JSX.Element;
+//# sourceMappingURL=FormDevTools.d.ts.map

package/dist/components/dev/FormDevTools/FormDevTools.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormDevTools.d.ts","sourceRoot":"","sources":["../../../../src/components/dev/FormDevTools/FormDevTools.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AA2B3D,MAAM,MAAM,aAAa,CAAC,YAAY,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,IAAI;IAC1F,KAAK,EAAE,CAAC,IAAI,CAAC,EAAE,GAAG,KAAK,GAAG,CAAC;IAC3B,SAAS,EAAE,CAAC,IAAI,CAAC,EAAE,GAAG,KAAK,GAAG,CAAC;IAC/B,QAAQ,EAAE,CACR,IAAI,EAAE,GAAG,EACT,KAAK,EAAE,GAAG,EACV,OAAO,CAAC,EAAE;QACR,cAAc,CAAC,EAAE,OAAO,CAAC;QACzB,WAAW,CAAC,EAAE,OAAO,CAAC;QACtB,WAAW,CAAC,EAAE,OAAO,CAAC;KACvB,KACE,IAAI,CAAC;IACV,OAAO,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,GAAG,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC;IAC3C,SAAS,EAAE;QACT,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;QAC7B,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;QAClC,aAAa,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;QACpC,OAAO,CAAC,EAAE,OAAO,CAAC;QAClB,YAAY,CAAC,EAAE,OAAO,CAAC;QACvB,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,aAAa,CAAC,EAAE,YAAY,CAAC;KAC9B,CAAC;IACF,YAAY,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAC;IACvC,QAAQ,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAC;IACnC,KAAK,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAC;IAChC,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,KAAK,GAAG;IAClB,6CAA6C;IAC7C,IAAI,EAAE,aAAa,CAAC;IACpB,8BAA8B;IAC9B,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE;QACtB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;QAC7B,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;KACtC,KAAK,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACzD,4CAA4C;IAC5C,gBAAgB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACvC,iCAAiC;IACjC,QAAQ,CAAC,EAAE,UAAU,GAAG,WAAW,GAAG,aAAa,GAAG,cAAc,CAAC;IACrE,mCAAmC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8FG;AACH,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EAAE,IAAI,EAAE,gBAAgB,EAAE,YAAY,EAAE,QAAwB,EAAE,KAAuB,EAAE,EAAE,KAAK,qBAqgBtI"}

package/dist/components/dev/FormDevTools/FormDevTools.js

@@ -0,0 +1,442 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { useCopyToClipboard } from '../../../hooks/useCopyToClipboard';
+import { getContainerStyle, getToggleButtonStyle, getPanelStyle, headerStyle, headerTitleStyle, getStatusBadgeStyle, getCopyButtonStyle, tabContainerStyle, getTabStyle, contentStyle, sectionTitleStyle, codeBlockStyle, errorItemStyle, errorLabelStyle, errorMessageStyle, statsContainerStyle, statCardStyle, statLabelStyle, statValueStyle, resizeHandleStyle, resizeHandleIndicatorStyle, } from './styles';
+/**
+ * react-hook-form의 상태를 실시간으로 시각화하는 개발용 컴포넌트
+ * form의 values, errors, dirtyFields, touchedFields 등을 한눈에 확인할 수 있습니다.
+ *
+ * @example
+ * ```tsx
+ * // Vite 프로젝트 - 간단한 사용법
+ * import { useForm } from 'react-hook-form';
+ * import { FormDevTools } from 'goodchuck-utils/components/dev';
+ *
+ * function MyForm() {
+ *   const form = useForm({
+ *     defaultValues: {
+ *       username: '',
+ *       email: '',
+ *       age: 0,
+ *     }
+ *   });
+ *
+ *   return (
+ *     <form onSubmit={form.handleSubmit(onSubmit)}>
+ *       <input {...form.register('username')} />
+ *       <input {...form.register('email')} />
+ *       <button type="submit">Submit</button>
+ *
+ *       {import.meta.env.DEV && <FormDevTools form={form} />}
+ *     </form>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Mock 데이터 생성 기능 포함
+ * function MyForm() {
+ *   const form = useForm({
+ *     defaultValues: {
+ *       username: '',
+ *       email: '',
+ *       age: 0,
+ *     }
+ *   });
+ *
+ *   return (
+ *     <form onSubmit={form.handleSubmit(onSubmit)}>
+ *       <input {...form.register('username')} />
+ *       <input {...form.register('email')} />
+ *       <button type="submit">Submit</button>
+ *
+ *       {import.meta.env.DEV && (
+ *         <FormDevTools
+ *           form={form}
+ *           generateMock={async ({ values, originalValues }) => {
+ *             // Mock 데이터 생성 로직
+ *             return {
+ *               username: 'test_user',
+ *               email: 'test@example.com',
+ *               age: 25,
+ *             };
+ *           }}
+ *         />
+ *       )}
+ *     </form>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // 수정 폼 예시
+ * function EditForm({ userData }) {
+ *   const form = useForm();
+ *
+ *   useEffect(() => {
+ *     form.reset(userData);
+ *   }, [userData]);
+ *
+ *   return (
+ *     <form onSubmit={form.handleSubmit(onSubmit)}>
+ *       <input {...form.register('username')} />
+ *       <input {...form.register('email')} />
+ *       <button type="submit">Update</button>
+ *
+ *       {process.env.NODE_ENV === 'development' && (
+ *         <FormDevTools
+ *           form={form}
+ *           position="top-right"
+ *           title="Edit Form Debug"
+ *         />
+ *       )}
+ *     </form>
+ *   );
+ * }
+ * ```
+ */
+export default function FormDevTools({ form, validationSchema, generateMock, position = 'bottom-left', title = 'Form DevTools' }) {
+    // form 객체에서 필요한 값들 추출
+    const { formState, watch, setValue, trigger } = form;
+    const values = watch(); // 모든 값을 watch
+    const originalValues = formState.defaultValues; // defaultValues를 원본 값으로 사용
+    const [isOpen, setIsOpen] = useState(false);
+    const [activeTab, setActiveTab] = useState('all');
+    const [panelPosition, setPanelPosition] = useState({ x: 0, y: 0 });
+    const [panelSize, setPanelSize] = useState({ width: 500, height: 400 });
+    const [isDragging, setIsDragging] = useState(false);
+    const [isResizing, setIsResizing] = useState(false);
+    const [dragStart, setDragStart] = useState({ x: 0, y: 0 });
+    const [resizeStart, setResizeStart] = useState({ x: 0, y: 0, width: 0, height: 0 });
+    const [isGenerating, setIsGenerating] = useState(false);
+    const [generateError, setGenerateError] = useState(null);
+    const panelRef = useRef(null);
+    const { copy, copiedText } = useCopyToClipboard();
+    const handleCopy = () => {
+        const data = {
+            values,
+            errors: formState.errors,
+            changedFields,
+            dirtyFields: formState.dirtyFields,
+            touchedFields: formState.touchedFields,
+            isValid: formState.isValid,
+            isSubmitting: formState.isSubmitting,
+            submitCount: formState.submitCount,
+        };
+        copy(JSON.stringify(data, null, 2));
+    };
+    const isCopied = copiedText !== null;
+    const errorCount = Object.keys(formState.errors || {}).length;
+    const dirtyFieldsCount = Object.keys(formState.dirtyFields || {}).length;
+    const touchedFieldsCount = Object.keys(formState.touchedFields || {}).length;
+    // Changed Fields 계산: dirtyFields를 기반으로 실제 변경된 값들을 추출
+    const getChangedFields = () => {
+        if (!formState.dirtyFields || !values)
+            return {};
+        const changed = {};
+        const getNestedValue = (obj, path) => {
+            return path.split('.').reduce((acc, key) => acc?.[key], obj);
+        };
+        const processDirtyFields = (dirty, prefix = '') => {
+            Object.keys(dirty).forEach((key) => {
+                const fullPath = prefix ? `${prefix}.${key}` : key;
+                const dirtyValue = dirty[key];
+                if (dirtyValue === true) {
+                    // 최종 필드인 경우
+                    const currentValue = getNestedValue(values, fullPath);
+                    const originalValue = originalValues ? getNestedValue(originalValues, fullPath) : undefined;
+                    if (JSON.stringify(currentValue) !== JSON.stringify(originalValue)) {
+                        changed[fullPath] = {
+                            from: originalValue,
+                            to: currentValue,
+                        };
+                    }
+                }
+                else if (typeof dirtyValue === 'object' && dirtyValue !== null) {
+                    // 중첩된 객체인 경우 재귀적으로 처리
+                    processDirtyFields(dirtyValue, fullPath);
+                }
+            });
+        };
+        processDirtyFields(formState.dirtyFields);
+        return changed;
+    };
+    const changedFields = getChangedFields();
+    const changedFieldsCount = Object.keys(changedFields).length;
+    // 드래그 핸들러
+    useEffect(() => {
+        const handleMouseMove = (e) => {
+            if (isDragging) {
+                const deltaX = e.clientX - dragStart.x;
+                const deltaY = e.clientY - dragStart.y;
+                setPanelPosition((prev) => ({
+                    x: prev.x + deltaX,
+                    y: prev.y + deltaY,
+                }));
+                setDragStart({ x: e.clientX, y: e.clientY });
+            }
+            if (isResizing) {
+                const deltaX = e.clientX - resizeStart.x;
+                const deltaY = e.clientY - resizeStart.y;
+                const maxHeight = window.innerHeight * 0.85; // 화면 높이의 85%를 최대값으로
+                setPanelSize({
+                    width: Math.max(300, resizeStart.width + deltaX),
+                    height: Math.min(maxHeight, Math.max(200, resizeStart.height + deltaY)),
+                });
+            }
+        };
+        const handleMouseUp = () => {
+            setIsDragging(false);
+            setIsResizing(false);
+        };
+        if (isDragging || isResizing) {
+            document.addEventListener('mousemove', handleMouseMove);
+            document.addEventListener('mouseup', handleMouseUp);
+            return () => {
+                document.removeEventListener('mousemove', handleMouseMove);
+                document.removeEventListener('mouseup', handleMouseUp);
+            };
+        }
+    }, [isDragging, isResizing, dragStart, resizeStart]);
+    const handleHeaderMouseDown = (e) => {
+        if (panelRef.current) {
+            const rect = panelRef.current.getBoundingClientRect();
+            setIsDragging(true);
+            setDragStart({
+                x: e.clientX,
+                y: e.clientY,
+            });
+            setPanelPosition({
+                x: rect.left,
+                y: rect.top,
+            });
+        }
+    };
+    const handleResizeMouseDown = (e) => {
+        e.stopPropagation();
+        setIsResizing(true);
+        setResizeStart({
+            x: e.clientX,
+            y: e.clientY,
+            width: panelSize.width,
+            height: panelSize.height,
+        });
+    };
+    const renderErrors = () => {
+        if (!formState.errors || Object.keys(formState.errors).length === 0) {
+            return (React.createElement("div", { style: { textAlign: 'center', color: '#9ca3af', padding: '20px', fontSize: '13px' } }, "No validation errors"));
+        }
+        return Object.entries(formState.errors).map(([field, error]) => (React.createElement("div", { key: field, style: errorItemStyle },
+            React.createElement("div", { style: errorLabelStyle }, field),
+            React.createElement("div", { style: errorMessageStyle }, error?.message || 'Invalid value'))));
+    };
+    // Mock 데이터 생성 핸들러
+    const handleGenerateMock = async () => {
+        if (!generateMock) {
+            setGenerateError('generateMock 함수가 필요합니다');
+            return;
+        }
+        setIsGenerating(true);
+        setGenerateError(null);
+        try {
+            // 사용자가 제공한 generateMock 함수 사용
+            const mockData = await generateMock({
+                values,
+                originalValues,
+            });
+            // setValue를 사용하여 각 필드를 설정
+            // reset을 사용하면 defaultValues가 업데이트되어 changedFields 계산이 부정확해짐
+            // setValue만 사용하면 originalValues와의 비교가 정확하게 유지됨
+            const setNestedValue = (data, prefix = '') => {
+                Object.keys(data).forEach((key) => {
+                    const fullPath = prefix ? `${prefix}.${key}` : key;
+                    const value = data[key];
+                    if (value !== null && typeof value === 'object' && !Array.isArray(value)) {
+                        // 중첩된 객체인 경우 재귀적으로 처리
+                        setNestedValue(value, fullPath);
+                    }
+                    else {
+                        // 최종 필드인 경우 setValue 호출
+                        setValue(fullPath, value, {
+                            shouldDirty: true, // dirty를 true로 설정 (changedFields에 반영됨)
+                            shouldValidate: true, // validation 실행
+                        });
+                    }
+                });
+            };
+            setNestedValue(mockData);
+            // 전체 validation 실행
+            if (trigger) {
+                await trigger();
+            }
+        }
+        catch (error) {
+            setGenerateError(error.message || 'Mock 데이터 생성 실패');
+        }
+        finally {
+            setIsGenerating(false);
+        }
+    };
+    return (React.createElement("div", { style: getContainerStyle(position) },
+        React.createElement("button", { onClick: () => setIsOpen(!isOpen), style: getToggleButtonStyle(formState.isValid), onMouseEnter: (e) => (e.currentTarget.style.backgroundColor = formState.isValid === false ? '#dc2626' : '#7c3aed'), onMouseLeave: (e) => (e.currentTarget.style.backgroundColor = formState.isValid === false ? '#ef4444' : '#8b5cf6') }, isOpen ? '✕' : '📝'),
+        isOpen && (React.createElement("div", { ref: panelRef, style: getPanelStyle(position, panelPosition, panelSize, isDragging) },
+            React.createElement("div", { style: headerStyle, onMouseDown: handleHeaderMouseDown },
+                React.createElement("div", { style: { display: 'flex', alignItems: 'center', gap: '8px' } },
+                    React.createElement("div", { style: headerTitleStyle },
+                        "\uD83D\uDCDD ",
+                        title),
+                    React.createElement("div", { style: getStatusBadgeStyle(formState.isValid) }, formState.isValid ? '✓ Valid' : `✗ ${errorCount} Error${errorCount > 1 ? 's' : ''}`)),
+                React.createElement("div", { style: { display: 'flex', gap: '8px', alignItems: 'center' } },
+                    generateMock && (React.createElement("button", { onClick: handleGenerateMock, disabled: isGenerating, style: {
+                            ...getCopyButtonStyle(false),
+                            backgroundColor: isGenerating ? '#9ca3af' : '#10b981',
+                            opacity: isGenerating ? 0.6 : 1,
+                            cursor: isGenerating ? 'not-allowed' : 'pointer',
+                        }, onMouseEnter: (e) => {
+                            if (!isGenerating)
+                                e.currentTarget.style.backgroundColor = '#059669';
+                        }, onMouseLeave: (e) => {
+                            if (!isGenerating)
+                                e.currentTarget.style.backgroundColor = '#10b981';
+                        } }, isGenerating ? '⏳ Generating...' : '🤖 Generate Mock')),
+                    React.createElement("button", { onClick: handleCopy, style: getCopyButtonStyle(isCopied), onMouseEnter: (e) => {
+                            if (!isCopied)
+                                e.currentTarget.style.backgroundColor = '#2563eb';
+                        }, onMouseLeave: (e) => {
+                            if (!isCopied)
+                                e.currentTarget.style.backgroundColor = '#3b82f6';
+                        } }, isCopied ? '✓ Copied' : 'Copy All'))),
+            generateError && (React.createElement("div", { style: {
+                    padding: '8px 16px',
+                    backgroundColor: '#fef2f2',
+                    borderBottom: '1px solid #fecaca',
+                    fontSize: '12px',
+                    color: '#991b1b',
+                } }, generateError)),
+            React.createElement("div", { style: tabContainerStyle },
+                React.createElement("button", { onClick: () => setActiveTab('all'), style: getTabStyle(activeTab === 'all'), onMouseEnter: (e) => {
+                        if (activeTab !== 'all')
+                            e.currentTarget.style.backgroundColor = '#f3f4f6';
+                    }, onMouseLeave: (e) => {
+                        if (activeTab !== 'all')
+                            e.currentTarget.style.backgroundColor = 'transparent';
+                    } }, "All"),
+                React.createElement("button", { onClick: () => setActiveTab('values'), style: getTabStyle(activeTab === 'values'), onMouseEnter: (e) => {
+                        if (activeTab !== 'values')
+                            e.currentTarget.style.backgroundColor = '#f3f4f6';
+                    }, onMouseLeave: (e) => {
+                        if (activeTab !== 'values')
+                            e.currentTarget.style.backgroundColor = 'transparent';
+                    } }, "Values"),
+                React.createElement("button", { onClick: () => setActiveTab('errors'), style: getTabStyle(activeTab === 'errors'), onMouseEnter: (e) => {
+                        if (activeTab !== 'errors')
+                            e.currentTarget.style.backgroundColor = '#f3f4f6';
+                    }, onMouseLeave: (e) => {
+                        if (activeTab !== 'errors')
+                            e.currentTarget.style.backgroundColor = 'transparent';
+                    } },
+                    "Errors ",
+                    errorCount > 0 && `(${errorCount})`),
+                React.createElement("button", { onClick: () => setActiveTab('changed'), style: getTabStyle(activeTab === 'changed'), onMouseEnter: (e) => {
+                        if (activeTab !== 'changed')
+                            e.currentTarget.style.backgroundColor = '#f3f4f6';
+                    }, onMouseLeave: (e) => {
+                        if (activeTab !== 'changed')
+                            e.currentTarget.style.backgroundColor = 'transparent';
+                    } },
+                    "Changed ",
+                    changedFieldsCount > 0 && `(${changedFieldsCount})`),
+                React.createElement("button", { onClick: () => setActiveTab('state'), style: getTabStyle(activeTab === 'state'), onMouseEnter: (e) => {
+                        if (activeTab !== 'state')
+                            e.currentTarget.style.backgroundColor = '#f3f4f6';
+                    }, onMouseLeave: (e) => {
+                        if (activeTab !== 'state')
+                            e.currentTarget.style.backgroundColor = 'transparent';
+                    } }, "State"),
+                validationSchema && (React.createElement("button", { onClick: () => setActiveTab('validation'), style: getTabStyle(activeTab === 'validation'), onMouseEnter: (e) => {
+                        if (activeTab !== 'validation')
+                            e.currentTarget.style.backgroundColor = '#f3f4f6';
+                    }, onMouseLeave: (e) => {
+                        if (activeTab !== 'validation')
+                            e.currentTarget.style.backgroundColor = 'transparent';
+                    } }, "Validation"))),
+            React.createElement("div", { style: contentStyle },
+                activeTab === 'all' && (React.createElement(React.Fragment, null,
+                    React.createElement("div", { style: statsContainerStyle },
+                        React.createElement("div", { style: statCardStyle },
+                            React.createElement("div", { style: statLabelStyle }, "Dirty Fields"),
+                            React.createElement("div", { style: statValueStyle }, dirtyFieldsCount)),
+                        React.createElement("div", { style: statCardStyle },
+                            React.createElement("div", { style: statLabelStyle }, "Touched Fields"),
+                            React.createElement("div", { style: statValueStyle }, touchedFieldsCount)),
+                        React.createElement("div", { style: statCardStyle },
+                            React.createElement("div", { style: statLabelStyle }, "Submit Count"),
+                            React.createElement("div", { style: statValueStyle }, formState.submitCount || 0)),
+                        React.createElement("div", { style: statCardStyle },
+                            React.createElement("div", { style: statLabelStyle }, "Submitting"),
+                            React.createElement("div", { style: statValueStyle }, formState.isSubmitting ? 'Yes' : 'No'))),
+                    React.createElement("div", { style: sectionTitleStyle }, "Form Values"),
+                    React.createElement("pre", { style: codeBlockStyle }, JSON.stringify(values || {}, null, 2)),
+                    errorCount > 0 && (React.createElement(React.Fragment, null,
+                        React.createElement("div", { style: sectionTitleStyle },
+                            "Validation Errors (",
+                            errorCount,
+                            ")"),
+                        renderErrors())),
+                    changedFieldsCount > 0 && (React.createElement(React.Fragment, null,
+                        React.createElement("div", { style: sectionTitleStyle },
+                            "Changed Fields (",
+                            changedFieldsCount,
+                            ")"),
+                        React.createElement("pre", { style: codeBlockStyle }, JSON.stringify(changedFields, null, 2)))),
+                    dirtyFieldsCount > 0 && (React.createElement(React.Fragment, null,
+                        React.createElement("div", { style: sectionTitleStyle }, "Dirty Fields"),
+                        React.createElement("pre", { style: codeBlockStyle }, JSON.stringify(formState.dirtyFields || {}, null, 2)))),
+                    touchedFieldsCount > 0 && (React.createElement(React.Fragment, null,
+                        React.createElement("div", { style: sectionTitleStyle }, "Touched Fields"),
+                        React.createElement("pre", { style: codeBlockStyle }, JSON.stringify(formState.touchedFields || {}, null, 2)))))),
+                activeTab === 'values' && (React.createElement(React.Fragment, null, values && Object.keys(values).length > 0 ? (React.createElement(React.Fragment, null,
+                    React.createElement("div", { style: sectionTitleStyle }, "Form Values"),
+                    React.createElement("pre", { style: codeBlockStyle }, JSON.stringify(values, null, 2)))) : (React.createElement("div", { style: { textAlign: 'center', color: '#9ca3af', padding: '40px 20px', fontSize: '13px' } },
+                    React.createElement("div", { style: { marginBottom: '8px' } }, "No form values"),
+                    React.createElement("div", { style: { fontSize: '11px', color: '#d1d5db' } }, "Form values will appear here"))))),
+                activeTab === 'errors' && (React.createElement(React.Fragment, null,
+                    React.createElement("div", { style: sectionTitleStyle },
+                        "Validation Errors ",
+                        errorCount > 0 && `(${errorCount})`),
+                    errorCount > 0 ? renderErrors() : (React.createElement("div", { style: { textAlign: 'center', color: '#9ca3af', padding: '20px', fontSize: '13px' } }, "No validation errors")))),
+                activeTab === 'changed' && (React.createElement(React.Fragment, null, changedFieldsCount > 0 ? (React.createElement(React.Fragment, null,
+                    React.createElement("div", { style: sectionTitleStyle },
+                        "Changed Fields (",
+                        changedFieldsCount,
+                        ")"),
+                    React.createElement("pre", { style: codeBlockStyle }, JSON.stringify(changedFields, null, 2)))) : (React.createElement("div", { style: { textAlign: 'center', color: '#9ca3af', padding: '40px 20px', fontSize: '13px' } },
+                    React.createElement("div", { style: { marginBottom: '8px' } }, "No changed fields"),
+                    React.createElement("div", { style: { fontSize: '11px', color: '#d1d5db' } }, "Fields will appear here when you modify form values"))))),
+                activeTab === 'state' && (React.createElement(React.Fragment, null,
+                    React.createElement("div", { style: statsContainerStyle },
+                        React.createElement("div", { style: statCardStyle },
+                            React.createElement("div", { style: statLabelStyle }, "Dirty Fields"),
+                            React.createElement("div", { style: statValueStyle }, dirtyFieldsCount)),
+                        React.createElement("div", { style: statCardStyle },
+                            React.createElement("div", { style: statLabelStyle }, "Touched Fields"),
+                            React.createElement("div", { style: statValueStyle }, touchedFieldsCount)),
+                        React.createElement("div", { style: statCardStyle },
+                            React.createElement("div", { style: statLabelStyle }, "Submit Count"),
+                            React.createElement("div", { style: statValueStyle }, formState.submitCount || 0)),
+                        React.createElement("div", { style: statCardStyle },
+                            React.createElement("div", { style: statLabelStyle }, "Submitting"),
+                            React.createElement("div", { style: statValueStyle }, formState.isSubmitting ? 'Yes' : 'No'))),
+                    dirtyFieldsCount > 0 && (React.createElement(React.Fragment, null,
+                        React.createElement("div", { style: sectionTitleStyle }, "Dirty Fields"),
+                        React.createElement("pre", { style: codeBlockStyle }, JSON.stringify(formState.dirtyFields || {}, null, 2)))),
+                    touchedFieldsCount > 0 && (React.createElement(React.Fragment, null,
+                        React.createElement("div", { style: sectionTitleStyle }, "Touched Fields"),
+                        React.createElement("pre", { style: codeBlockStyle }, JSON.stringify(formState.touchedFields || {}, null, 2)))))),
+                activeTab === 'validation' && validationSchema && (React.createElement(React.Fragment, null,
+                    React.createElement("div", { style: sectionTitleStyle }, "Validation Schema"),
+                    React.createElement("pre", { style: codeBlockStyle }, JSON.stringify(validationSchema, null, 2))))),
+            React.createElement("div", { onMouseDown: handleResizeMouseDown, style: resizeHandleStyle }),
+            React.createElement("div", { onMouseDown: handleResizeMouseDown, style: resizeHandleIndicatorStyle })))));
+}

package/dist/components/dev/FormDevTools/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './FormDevTools';
+export type { Props as FormDevToolsProps, UseFormReturn } from './FormDevTools';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/dev/FormDevTools/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/dev/FormDevTools/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AACzC,YAAY,EAAE,KAAK,IAAI,iBAAiB,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/components/dev/FormDevTools/index.js

@@ -0,0 +1 @@
+export { default } from './FormDevTools';

package/dist/components/dev/FormDevTools/styles.d.ts

@@ -0,0 +1,45 @@
+import { CSSProperties } from 'react';
+export type StyleProps = {
+    isValid?: boolean;
+    isCopied: boolean;
+    isActive: boolean;
+    isDragging: boolean;
+    position: string;
+    panelPosition: {
+        x: number;
+        y: number;
+    };
+    panelSize: {
+        width: number;
+        height: number;
+    };
+};
+export declare const getPositionStyles: () => Record<string, CSSProperties>;
+export declare const getContainerStyle: (position: string) => CSSProperties;
+export declare const getToggleButtonStyle: (isValid: boolean | undefined) => CSSProperties;
+export declare const getPanelStyle: (position: string, panelPosition: {
+    x: number;
+    y: number;
+}, panelSize: {
+    width: number;
+    height: number;
+}, isDragging: boolean) => CSSProperties;
+export declare const headerStyle: CSSProperties;
+export declare const headerTitleStyle: CSSProperties;
+export declare const getStatusBadgeStyle: (isValid: boolean | undefined) => CSSProperties;
+export declare const getCopyButtonStyle: (isCopied: boolean) => CSSProperties;
+export declare const tabContainerStyle: CSSProperties;
+export declare const getTabStyle: (isActive: boolean) => CSSProperties;
+export declare const contentStyle: CSSProperties;
+export declare const sectionTitleStyle: CSSProperties;
+export declare const codeBlockStyle: CSSProperties;
+export declare const errorItemStyle: CSSProperties;
+export declare const errorLabelStyle: CSSProperties;
+export declare const errorMessageStyle: CSSProperties;
+export declare const statsContainerStyle: CSSProperties;
+export declare const statCardStyle: CSSProperties;
+export declare const statLabelStyle: CSSProperties;
+export declare const statValueStyle: CSSProperties;
+export declare const resizeHandleStyle: CSSProperties;
+export declare const resizeHandleIndicatorStyle: CSSProperties;
+//# sourceMappingURL=styles.d.ts.map

package/dist/components/dev/FormDevTools/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/dev/FormDevTools/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAEtC,MAAM,MAAM,UAAU,GAAG;IACvB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,UAAU,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,aAAa,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACxC,SAAS,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;CAC9C,CAAC;AAEF,eAAO,MAAM,iBAAiB,QAAO,MAAM,CAAC,MAAM,EAAE,aAAa,CAK/D,CAAC;AAEH,eAAO,MAAM,iBAAiB,GAAI,UAAU,MAAM,KAAG,aAQpD,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAI,SAAS,OAAO,GAAG,SAAS,KAAG,aAclE,CAAC;AAEH,eAAO,MAAM,aAAa,GACxB,UAAU,MAAM,EAChB,eAAe;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,EACvC,WAAW;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,EAC5C,YAAY,OAAO,KAClB,aAoBF,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,aASzB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,aAI9B,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAI,SAAS,OAAO,GAAG,SAAS,KAAG,aAUjE,CAAC;AAEH,eAAO,MAAM,kBAAkB,GAAI,UAAU,OAAO,KAAG,aAUrD,CAAC;AAEH,eAAO,MAAM,iBAAiB,EAAE,aAK/B,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,UAAU,OAAO,KAAG,aAY9C,CAAC;AAEH,eAAO,MAAM,YAAY,EAAE,aAM1B,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,aAO/B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,aAY5B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,aAM5B,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,aAK7B,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,aAG/B,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,aAKjC,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,aAK3B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,aAM5B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,aAI5B,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,aAS/B,CAAC;AAEF,eAAO,MAAM,0BAA0B,EAAE,aAUxC,CAAC"}