goodchuck-utils 1.4.2 → 1.6.0

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

@@ -0,0 +1,187 @@
+export const getPositionStyles = () => ({
+    'top-left': { top: 16, left: 16 },
+    'top-right': { top: 16, right: 16 },
+    'bottom-left': { bottom: 16, left: 16 },
+    'bottom-right': { bottom: 16, right: 16 },
+});
+export const getContainerStyle = (position) => {
+    const positionStyles = getPositionStyles();
+    return {
+        position: 'fixed',
+        ...positionStyles[position],
+        zIndex: 99999,
+        fontFamily: 'system-ui, -apple-system, sans-serif',
+    };
+};
+export const getToggleButtonStyle = (isValid) => ({
+    width: '48px',
+    height: '48px',
+    borderRadius: '50%',
+    backgroundColor: isValid === false ? '#ef4444' : '#8b5cf6',
+    color: 'white',
+    border: 'none',
+    cursor: 'pointer',
+    fontSize: '20px',
+    boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    transition: 'background-color 0.2s',
+});
+export const getPanelStyle = (position, panelPosition, panelSize, isDragging) => ({
+    position: 'fixed',
+    top: panelPosition.y || (position.includes('top') ? 60 : undefined),
+    bottom: !panelPosition.y && position.includes('bottom') ? 60 : undefined,
+    left: panelPosition.x || (position.includes('left') ? 0 : undefined),
+    right: !panelPosition.x && position.includes('right') ? 0 : undefined,
+    backgroundColor: 'white',
+    borderRadius: '12px',
+    boxShadow: '0 10px 25px rgba(0, 0, 0, 0.15)',
+    border: '1px solid #e5e7eb',
+    width: `${panelSize.width}px`,
+    height: `${panelSize.height}px`,
+    overflow: 'hidden',
+    display: 'flex',
+    flexDirection: 'column',
+    cursor: isDragging ? 'grabbing' : 'default',
+});
+export const headerStyle = {
+    padding: '12px 16px',
+    borderBottom: '1px solid #e5e7eb',
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    backgroundColor: '#f9fafb',
+    cursor: 'grab',
+    userSelect: 'none',
+};
+export const headerTitleStyle = {
+    fontWeight: 'bold',
+    fontSize: '14px',
+    color: '#111827',
+};
+export const getStatusBadgeStyle = (isValid) => ({
+    display: 'inline-flex',
+    alignItems: 'center',
+    gap: '4px',
+    padding: '4px 8px',
+    backgroundColor: isValid ? '#dcfce7' : '#fee2e2',
+    color: isValid ? '#166534' : '#991b1b',
+    borderRadius: '6px',
+    fontSize: '11px',
+    fontWeight: 600,
+});
+export const getCopyButtonStyle = (isCopied) => ({
+    padding: '4px 12px',
+    backgroundColor: isCopied ? '#10b981' : '#3b82f6',
+    color: 'white',
+    border: 'none',
+    borderRadius: '6px',
+    cursor: 'pointer',
+    fontSize: '11px',
+    fontWeight: 600,
+    transition: 'background-color 0.2s',
+});
+export const tabContainerStyle = {
+    display: 'flex',
+    borderBottom: '1px solid #e5e7eb',
+    backgroundColor: '#f9fafb',
+};
+export const getTabStyle = (isActive) => ({
+    flex: 1,
+    padding: '10px 16px',
+    border: 'none',
+    backgroundColor: isActive ? 'white' : 'transparent',
+    color: isActive ? '#8b5cf6' : '#6b7280',
+    cursor: 'pointer',
+    fontSize: '13px',
+    fontWeight: isActive ? 600 : 400,
+    borderBottom: isActive ? '2px solid #8b5cf6' : '2px solid transparent',
+    transition: 'all 0.15s',
+});
+export const contentStyle = {
+    flex: 1,
+    overflowY: 'auto',
+    padding: '16px',
+};
+export const sectionTitleStyle = {
+    fontSize: '12px',
+    fontWeight: 'bold',
+    color: '#6b7280',
+    marginBottom: '8px',
+    textTransform: 'uppercase',
+    letterSpacing: '0.5px',
+};
+export const codeBlockStyle = {
+    backgroundColor: '#f3f4f6',
+    borderRadius: '6px',
+    padding: '12px',
+    fontSize: '12px',
+    fontFamily: 'monospace',
+    overflow: 'auto',
+    maxHeight: '400px',
+    marginBottom: '16px',
+    color: '#111827', // 검은색 텍스트
+};
+export const errorItemStyle = {
+    padding: '8px 12px',
+    backgroundColor: '#fef2f2',
+    border: '1px solid #fecaca',
+    borderRadius: '6px',
+    marginBottom: '8px',
+};
+export const errorLabelStyle = {
+    fontSize: '12px',
+    fontWeight: 600,
+    color: '#991b1b',
+    marginBottom: '4px',
+};
+export const errorMessageStyle = {
+    fontSize: '11px',
+    color: '#7f1d1d',
+};
+export const statsContainerStyle = {
+    display: 'grid',
+    gridTemplateColumns: '1fr 1fr',
+    gap: '12px',
+    marginBottom: '16px',
+};
+export const statCardStyle = {
+    padding: '12px',
+    backgroundColor: '#f9fafb',
+    borderRadius: '8px',
+    border: '1px solid #e5e7eb',
+};
+export const statLabelStyle = {
+    fontSize: '11px',
+    color: '#6b7280',
+    marginBottom: '4px',
+    textTransform: 'uppercase',
+    letterSpacing: '0.5px',
+};
+export const statValueStyle = {
+    fontSize: '18px',
+    fontWeight: 'bold',
+    color: '#111827',
+};
+export const resizeHandleStyle = {
+    position: 'absolute',
+    bottom: 0,
+    right: 0,
+    width: '20px',
+    height: '20px',
+    cursor: 'nwse-resize',
+    backgroundColor: 'transparent',
+    zIndex: 1,
+};
+export const resizeHandleIndicatorStyle = {
+    position: 'absolute',
+    bottom: 0,
+    right: 0,
+    width: '12px',
+    height: '12px',
+    cursor: 'nwse-resize',
+    borderRight: '3px solid #9ca3af',
+    borderBottom: '3px solid #9ca3af',
+    borderRadius: '0 0 12px 0',
+};

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

@@ -0,0 +1,76 @@
+import React from 'react';
+type FormState = {
+    values?: Record<string, any>;
+    errors?: Record<string, any>;
+    dirtyFields?: Record<string, any>;
+    touchedFields?: Record<string, any>;
+    isValid?: boolean;
+    isSubmitting?: boolean;
+    submitCount?: number;
+};
+type Props = {
+    /** react-hook-form의 formState */
+    formState: FormState;
+    /** 현재 폼 values (watch() 결과) */
+    values?: 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 { register, handleSubmit, formState, watch } = useForm({
+ *     defaultValues: {
+ *       username: '',
+ *       email: '',
+ *       age: 0,
+ *     }
+ *   });
+ *
+ *   const values = watch(); // 모든 값 watch
+ *
+ *   const onSubmit = (data) => {
+ *     console.log(data);
+ *   };
+ *
+ *   return (
+ *     <form onSubmit={handleSubmit(onSubmit)}>
+ *       <input {...register('username', { required: 'Username is required' })} />
+ *       <input {...register('email', { required: 'Email is required' })} />
+ *       <input type="number" {...register('age', { min: 18 })} />
+ *       <button type="submit">Submit</button>
+ *
+ *       {import.meta.env.DEV && (
+ *         <FormDevTools formState={formState} values={values} />
+ *       )}
+ *     </form>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Create React App 프로젝트
+ * {process.env.NODE_ENV === 'development' && (
+ *   <FormDevTools
+ *     formState={formState}
+ *     values={values}
+ *     position="top-right"
+ *     title="User Form Debug"
+ *   />
+ * )}
+ * ```
+ */
+export default function FormDevTools({ formState, values, position, title }: Props): React.JSX.Element;
+export {};
+//# sourceMappingURL=FormDevTools.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FormDevTools.d.ts","sourceRoot":"","sources":["../../../src/components/dev/FormDevTools.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqD,MAAM,OAAO,CAAC;AAG1E,KAAK,SAAS,GAAG;IACf,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC7B,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAClC,aAAa,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACpC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,KAAK,KAAK,GAAG;IACX,iCAAiC;IACjC,SAAS,EAAE,SAAS,CAAC;IACrB,+BAA+B;IAC/B,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC7B,iCAAiC;IACjC,QAAQ,CAAC,EAAE,UAAU,GAAG,WAAW,GAAG,aAAa,GAAG,cAAc,CAAC;IACrE,mCAAmC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoDG;AACH,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,QAAwB,EAAE,KAAuB,EAAE,EAAE,KAAK,qBAocnH"}

package/dist/components/dev/FormDevTools.js

@@ -0,0 +1,399 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { useCopyToClipboard } from '../../hooks/useCopyToClipboard';
+/**
+ * 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 { register, handleSubmit, formState, watch } = useForm({
+ *     defaultValues: {
+ *       username: '',
+ *       email: '',
+ *       age: 0,
+ *     }
+ *   });
+ *
+ *   const values = watch(); // 모든 값 watch
+ *
+ *   const onSubmit = (data) => {
+ *     console.log(data);
+ *   };
+ *
+ *   return (
+ *     <form onSubmit={handleSubmit(onSubmit)}>
+ *       <input {...register('username', { required: 'Username is required' })} />
+ *       <input {...register('email', { required: 'Email is required' })} />
+ *       <input type="number" {...register('age', { min: 18 })} />
+ *       <button type="submit">Submit</button>
+ *
+ *       {import.meta.env.DEV && (
+ *         <FormDevTools formState={formState} values={values} />
+ *       )}
+ *     </form>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Create React App 프로젝트
+ * {process.env.NODE_ENV === 'development' && (
+ *   <FormDevTools
+ *     formState={formState}
+ *     values={values}
+ *     position="top-right"
+ *     title="User Form Debug"
+ *   />
+ * )}
+ * ```
+ */
+export default function FormDevTools({ formState, values, position = 'bottom-left', title = 'Form DevTools' }) {
+    const [isOpen, setIsOpen] = useState(false);
+    const [activeTab, setActiveTab] = useState('values');
+    const [panelPosition, setPanelPosition] = useState({ x: 0, y: 0 });
+    const [panelSize, setPanelSize] = useState({ width: 500, height: 600 });
+    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 panelRef = useRef(null);
+    const { copy, copiedText } = useCopyToClipboard();
+    const handleCopy = () => {
+        const data = {
+            values,
+            errors: formState.errors,
+            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 positionStyles = {
+        'top-left': { top: 16, left: 16 },
+        'top-right': { top: 16, right: 16 },
+        'bottom-left': { bottom: 16, left: 16 },
+        'bottom-right': { bottom: 16, right: 16 },
+    };
+    const containerStyle = {
+        position: 'fixed',
+        ...positionStyles[position],
+        zIndex: 99999,
+        fontFamily: 'system-ui, -apple-system, sans-serif',
+    };
+    const toggleButtonStyle = {
+        width: '48px',
+        height: '48px',
+        borderRadius: '50%',
+        backgroundColor: formState.isValid === false ? '#ef4444' : '#8b5cf6',
+        color: 'white',
+        border: 'none',
+        cursor: 'pointer',
+        fontSize: '20px',
+        boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        transition: 'background-color 0.2s',
+    };
+    const panelStyle = {
+        position: 'fixed',
+        top: panelPosition.y || (position.includes('top') ? 60 : undefined),
+        bottom: !panelPosition.y && position.includes('bottom') ? 60 : undefined,
+        left: panelPosition.x || (position.includes('left') ? 0 : undefined),
+        right: !panelPosition.x && position.includes('right') ? 0 : undefined,
+        backgroundColor: 'white',
+        borderRadius: '12px',
+        boxShadow: '0 10px 25px rgba(0, 0, 0, 0.15)',
+        border: '1px solid #e5e7eb',
+        width: `${panelSize.width}px`,
+        height: `${panelSize.height}px`,
+        overflow: 'hidden',
+        display: 'flex',
+        flexDirection: 'column',
+        cursor: isDragging ? 'grabbing' : 'default',
+    };
+    const headerStyle = {
+        padding: '12px 16px',
+        borderBottom: '1px solid #e5e7eb',
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        backgroundColor: '#f9fafb',
+        cursor: 'grab',
+        userSelect: 'none',
+    };
+    const headerTitleStyle = {
+        fontWeight: 'bold',
+        fontSize: '14px',
+        color: '#111827',
+    };
+    const statusBadgeStyle = {
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: '4px',
+        padding: '4px 8px',
+        backgroundColor: formState.isValid ? '#dcfce7' : '#fee2e2',
+        color: formState.isValid ? '#166534' : '#991b1b',
+        borderRadius: '6px',
+        fontSize: '11px',
+        fontWeight: 600,
+    };
+    const copyButtonStyle = {
+        padding: '4px 12px',
+        backgroundColor: isCopied ? '#10b981' : '#3b82f6',
+        color: 'white',
+        border: 'none',
+        borderRadius: '6px',
+        cursor: 'pointer',
+        fontSize: '11px',
+        fontWeight: 600,
+        transition: 'background-color 0.2s',
+    };
+    const tabContainerStyle = {
+        display: 'flex',
+        borderBottom: '1px solid #e5e7eb',
+        backgroundColor: '#f9fafb',
+    };
+    const tabStyle = (isActive) => ({
+        flex: 1,
+        padding: '10px 16px',
+        border: 'none',
+        backgroundColor: isActive ? 'white' : 'transparent',
+        color: isActive ? '#8b5cf6' : '#6b7280',
+        cursor: 'pointer',
+        fontSize: '13px',
+        fontWeight: isActive ? 600 : 400,
+        borderBottom: isActive ? '2px solid #8b5cf6' : '2px solid transparent',
+        transition: 'all 0.15s',
+    });
+    const contentStyle = {
+        flex: 1,
+        overflowY: 'auto',
+        padding: '16px',
+    };
+    const sectionTitleStyle = {
+        fontSize: '12px',
+        fontWeight: 'bold',
+        color: '#6b7280',
+        marginBottom: '8px',
+        textTransform: 'uppercase',
+        letterSpacing: '0.5px',
+    };
+    const codeBlockStyle = {
+        backgroundColor: '#f3f4f6',
+        borderRadius: '6px',
+        padding: '12px',
+        fontSize: '12px',
+        fontFamily: 'monospace',
+        overflow: 'auto',
+        maxHeight: '400px',
+        marginBottom: '16px',
+        color: '#111827', // 검은색 텍스트
+    };
+    const errorItemStyle = {
+        padding: '8px 12px',
+        backgroundColor: '#fef2f2',
+        border: '1px solid #fecaca',
+        borderRadius: '6px',
+        marginBottom: '8px',
+    };
+    const errorLabelStyle = {
+        fontSize: '12px',
+        fontWeight: 600,
+        color: '#991b1b',
+        marginBottom: '4px',
+    };
+    const errorMessageStyle = {
+        fontSize: '11px',
+        color: '#7f1d1d',
+    };
+    const statsContainerStyle = {
+        display: 'grid',
+        gridTemplateColumns: '1fr 1fr',
+        gap: '12px',
+        marginBottom: '16px',
+    };
+    const statCardStyle = {
+        padding: '12px',
+        backgroundColor: '#f9fafb',
+        borderRadius: '8px',
+        border: '1px solid #e5e7eb',
+    };
+    const statLabelStyle = {
+        fontSize: '11px',
+        color: '#6b7280',
+        marginBottom: '4px',
+        textTransform: 'uppercase',
+        letterSpacing: '0.5px',
+    };
+    const statValueStyle = {
+        fontSize: '18px',
+        fontWeight: 'bold',
+        color: '#111827',
+    };
+    const errorCount = Object.keys(formState.errors || {}).length;
+    const dirtyFieldsCount = Object.keys(formState.dirtyFields || {}).length;
+    const touchedFieldsCount = Object.keys(formState.touchedFields || {}).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;
+                setPanelSize({
+                    width: Math.max(300, resizeStart.width + deltaX),
+                    height: 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'))));
+    };
+    return (React.createElement("div", { style: containerStyle },
+        React.createElement("button", { onClick: () => setIsOpen(!isOpen), style: toggleButtonStyle, 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: panelStyle },
+            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: statusBadgeStyle }, formState.isValid ? '✓ Valid' : `✗ ${errorCount} Error${errorCount > 1 ? 's' : ''}`)),
+                React.createElement("button", { onClick: handleCopy, style: copyButtonStyle, onMouseEnter: (e) => {
+                        if (!isCopied)
+                            e.currentTarget.style.backgroundColor = '#2563eb';
+                    }, onMouseLeave: (e) => {
+                        if (!isCopied)
+                            e.currentTarget.style.backgroundColor = '#3b82f6';
+                    } }, isCopied ? '✓ Copied' : 'Copy All')),
+            React.createElement("div", { style: tabContainerStyle },
+                React.createElement("button", { onClick: () => setActiveTab('values'), style: tabStyle(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: tabStyle(activeTab === 'errors'), onMouseEnter: (e) => {
+                        if (activeTab !== 'errors')
+                            e.currentTarget.style.backgroundColor = '#f3f4f6';
+                    }, onMouseLeave: (e) => {
+                        if (activeTab !== 'errors')
+                            e.currentTarget.style.backgroundColor = 'transparent';
+                    } },
+                    "Errors (",
+                    errorCount,
+                    ")"),
+                React.createElement("button", { onClick: () => setActiveTab('state'), style: tabStyle(activeTab === 'state'), onMouseEnter: (e) => {
+                        if (activeTab !== 'state')
+                            e.currentTarget.style.backgroundColor = '#f3f4f6';
+                    }, onMouseLeave: (e) => {
+                        if (activeTab !== 'state')
+                            e.currentTarget.style.backgroundColor = 'transparent';
+                    } }, "State")),
+            React.createElement("div", { style: contentStyle },
+                activeTab === 'values' && (React.createElement(React.Fragment, null,
+                    React.createElement("div", { style: sectionTitleStyle }, "Form Values"),
+                    React.createElement("pre", { style: codeBlockStyle }, JSON.stringify(values || {}, null, 2)))),
+                activeTab === 'errors' && (React.createElement(React.Fragment, null,
+                    React.createElement("div", { style: sectionTitleStyle }, "Validation Errors"),
+                    renderErrors())),
+                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'))),
+                    React.createElement("div", { style: sectionTitleStyle }, "Dirty Fields"),
+                    React.createElement("pre", { style: codeBlockStyle }, JSON.stringify(formState.dirtyFields || {}, null, 2)),
+                    React.createElement("div", { style: sectionTitleStyle }, "Touched Fields"),
+                    React.createElement("pre", { style: codeBlockStyle }, JSON.stringify(formState.touchedFields || {}, null, 2))))),
+            React.createElement("div", { onMouseDown: handleResizeMouseDown, style: {
+                    position: 'absolute',
+                    bottom: 0,
+                    right: 0,
+                    width: '20px',
+                    height: '20px',
+                    cursor: 'nwse-resize',
+                    backgroundColor: 'transparent',
+                    zIndex: 1,
+                } }),
+            React.createElement("div", { onMouseDown: handleResizeMouseDown, style: {
+                    position: 'absolute',
+                    bottom: 0,
+                    right: 0,
+                    width: '12px',
+                    height: '12px',
+                    cursor: 'nwse-resize',
+                    borderRight: '3px solid #9ca3af',
+                    borderBottom: '3px solid #9ca3af',
+                    borderRadius: '0 0 12px 0',
+                } })))));
+}