tekivex-ui 2.5.13 → 2.5.15

package/src/components/TkxForm.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 // ══════════════════════════════════════════════════════════════════════════════
 // TKX FORM — Enterprise-grade form controller
 // Context-based form state management with field-level validation,
@@ -8,6 +10,7 @@ import {
   createContext,
   useContext,
   useCallback,
+  useEffect,
   useMemo,
   useRef,
   useState,
@@ -411,8 +414,24 @@ export function TkxForm<T extends Record<string, unknown> = Record<string, unkno
     : tkx('flex flex-col gap-5');
 
   // ─── Context Value ─────────────────────────────────────────────────────
-  // When an external form instance is provided via the `form` prop, expose it
-  // through the context so that useTkxForm() inside children returns it.
+  // When an external form instance is provided via the `form` prop, bind its
+  // methods to the live internal instance so programmatic calls (e.g.
+  // form.setFieldValue) drive re-renders. Without this binding the external
+  // instance is just a detached ref store and the UI never updates.
+  useEffect(() => {
+    if (!externalInstance) return;
+    const live = externalInstance as FormInstance;
+    live.getFieldValue = instance.getFieldValue;
+    live.setFieldValue = instance.setFieldValue;
+    live.getFieldsValue = instance.getFieldsValue;
+    live.setFieldsValue = instance.setFieldsValue;
+    live.validateFields = instance.validateFields;
+    live.validateField = instance.validateField;
+    live.resetFields = instance.resetFields;
+    live.getFieldError = instance.getFieldError;
+    live.isFieldTouched = instance.isFieldTouched;
+  }, [externalInstance, instance]);
+
   const activeInstance: FormInstance = (externalInstance as FormInstance | undefined) ?? instance;
 
   const contextValue = useMemo<FormContextValue>(() => ({
@@ -661,4 +680,4 @@ function injectFormStyles(): void {
 }
 
 // Auto-inject styles on module load (client only)
-injectFormStyles();
+injectFormStyles();

package/src/components/TkxIcon.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { forwardRef, type ReactNode, type SVGAttributes } from 'react';
 import { useTheme } from '../themes';
 import { tkx, cx } from '../engine/tkx';
@@ -680,4 +682,4 @@ export const ICON_CATEGORIES: Record<string, IconName[]> = {
     'file', 'file-text', 'folder', 'folder-open', 'code', 'terminal',
     'lock', 'unlock', 'key', 'shield',
   ],
-};
+};

package/src/components/TkxImage.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import {
   useState,
   useEffect,
@@ -274,4 +276,4 @@ export function TkxImage({
       {lightbox}
     </>
   );
-}
+}

package/src/components/TkxInput.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { forwardRef, useId, type InputHTMLAttributes, type ReactNode } from 'react';
 import { useTheme } from '../themes';
 import { sanitizeString } from '../engine/security';
@@ -98,4 +100,4 @@ export const TkxInput = forwardRef<HTMLInputElement, TkxInputProps>(
   },
 );
 
-TkxInput.displayName = 'TkxInput';
+TkxInput.displayName = 'TkxInput';

package/src/components/TkxLayout.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import {
   forwardRef,
   createContext,
@@ -644,4 +646,4 @@ TkxCol.displayName = 'TkxCol';
 //   </TkxLayout>
 //   <TkxFooter>Footer</TkxFooter>
 // </TkxLayout>
-// ══════════════════════════════════════════════════════════════════════════════
+// ══════════════════════════════════════════════════════════════════════════════

package/src/components/TkxList.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { type ReactNode } from 'react';
 import { useTheme } from '../themes';
 import { sanitizeString } from '../engine/security';
@@ -239,4 +241,4 @@ export function TkxList({
       )}
     </div>
   );
-}
+}

package/src/components/TkxLiveFeed.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import {
   useState,
   useEffect,
@@ -326,4 +328,4 @@ export function TkxLiveFeed({
 }
 
 // Ensure tkx is referenced (satisfies import requirement)
-void tkx;
+void tkx;

package/src/components/TkxLiveLog.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import {
   useState,
   useEffect,
@@ -467,4 +469,4 @@ export function TkxLiveLog({
 }
 
 // Satisfy import requirement
-void tkx;
+void tkx;

package/src/components/TkxLiveMetrics.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import {
   useState,
   useEffect,
@@ -310,4 +312,4 @@ export function TkxLiveMetrics({
 }
 
 // Satisfy import requirement
-void tkx;
+void tkx;

package/src/components/TkxLogo.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { type ReactNode, type CSSProperties } from 'react';
 import { useTheme } from '../themes';
 import { useReducedMotion } from '../hooks';
@@ -294,4 +296,4 @@ function splitBrand(
       <span style={{ color: primaryColor }}>{text.slice(split)}</span>
     </>
   );
-}
+}