tekivex-ui 2.5.13 → 2.5.14

package/src/components/TkxAIChatBubble.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { useState, useEffect, useRef, type CSSProperties, type ReactNode } from 'react';
 import { useTheme } from '../themes';
 import { cx, tkx } from '../engine/tkx';
@@ -77,18 +79,39 @@ export function TkxAIChatBubble({
   const fullText = typeof content === 'string' ? sanitizeString(content) : '';
   const [displayed, setDisplayed] = useState(streaming ? '' : fullText);
   const [copied, setCopied] = useState(false);
+  // Debounced text exposed to assistive tech. We deliberately avoid
+  // announcing each keystroke — screen readers would read every character.
+  // Instead we publish on word boundaries (~350ms idle) and on completion.
+  const [liveAnnouncement, setLiveAnnouncement] = useState(streaming ? '' : fullText);
   const idxRef = useRef(0);
+  const liveDebounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   useEffect(() => {
-    if (!streaming || typeof content !== 'string') return;
+    if (!streaming || typeof content !== 'string') {
+      setLiveAnnouncement(fullText);
+      return;
+    }
     idxRef.current = 0;
     setDisplayed('');
+    setLiveAnnouncement('');
     const interval = setInterval(() => {
       idxRef.current++;
-      setDisplayed(fullText.slice(0, idxRef.current));
-      if (idxRef.current >= fullText.length) clearInterval(interval);
+      const next = fullText.slice(0, idxRef.current);
+      setDisplayed(next);
+      // Queue a debounced live-region update. Clear prior timer so
+      // only the latest pause flushes — AT hears words, not letters.
+      if (liveDebounceRef.current) clearTimeout(liveDebounceRef.current);
+      liveDebounceRef.current = setTimeout(() => setLiveAnnouncement(next), 350);
+      if (idxRef.current >= fullText.length) {
+        clearInterval(interval);
+        if (liveDebounceRef.current) clearTimeout(liveDebounceRef.current);
+        setLiveAnnouncement(fullText);
+      }
     }, 18);
-    return () => clearInterval(interval);
+    return () => {
+      clearInterval(interval);
+      if (liveDebounceRef.current) clearTimeout(liveDebounceRef.current);
+    };
   }, [fullText, streaming, content]);
 
   const handleCopy = () => {
@@ -154,12 +177,36 @@ export function TkxAIChatBubble({
         )}
 
         {/* Bubble */}
-        <div style={bubbleStyle}>
+        <div style={bubbleStyle} role="article" aria-label={isUser ? 'Your message' : 'Assistant message'}>
           {typeof content === 'string' ? (
             <>
-              {streaming ? displayed : sanitizeString(content)}
+              {/* Visible (noisy) streamed text: hidden from AT during streaming
+                  so screen readers aren't spammed with every character. */}
+              <span aria-hidden={streaming ? 'true' : undefined}>
+                {streaming ? displayed : sanitizeString(content)}
+              </span>
               {streaming && displayed.length < fullText.length && (
-                <span style={{ display: 'inline-block', width: 2, height: 14, background: isUser ? '#fff' : theme.primary, marginLeft: 2, animation: 'tkx-blink 1s step-end infinite', verticalAlign: 'text-bottom' }} />
+                <span aria-hidden="true" style={{ display: 'inline-block', width: 2, height: 14, background: isUser ? '#fff' : theme.primary, marginLeft: 2, animation: 'tkx-blink 1s step-end infinite', verticalAlign: 'text-bottom' }} />
+              )}
+              {/* Debounced polite live region — announces completed words, not keystrokes. */}
+              {streaming && (
+                <span
+                  aria-live="polite"
+                  aria-atomic="false"
+                  style={{
+                    position: 'absolute',
+                    width: 1,
+                    height: 1,
+                    padding: 0,
+                    margin: -1,
+                    overflow: 'hidden',
+                    clip: 'rect(0,0,0,0)',
+                    whiteSpace: 'nowrap',
+                    border: 0,
+                  }}
+                >
+                  {liveAnnouncement}
+                </span>
               )}
             </>
           ) : content}
@@ -206,4 +253,4 @@ export function TkxAIChatBubble({
       `}</style>
     </div>
   );
-}
+}

package/src/components/TkxAIConfidenceBar.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { useEffect, useRef, type CSSProperties } from 'react';
 import { useTheme } from '../themes';
 import { cx, tkx } from '../engine/tkx';
@@ -128,4 +130,4 @@ export function TkxAIConfidenceBar({
       `}</style>
     </div>
   );
-}
+}

package/src/components/TkxAIThinking.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { useState, useEffect, type CSSProperties } from 'react';
 import { useTheme } from '../themes';
 import { cx, tkx } from '../engine/tkx';
@@ -188,4 +190,4 @@ export function TkxAIThinking({
       `}</style>
     </div>
   );
-}
+}

package/src/components/TkxAccordion.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import {
   useState,
   useRef,
@@ -585,4 +587,4 @@ export function TkxAccordion({
   );
 }
 
-TkxAccordion.displayName = 'TkxAccordion';
+TkxAccordion.displayName = 'TkxAccordion';

package/src/components/TkxAffix.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { type ReactNode, useState, useRef, useEffect, useCallback, useMemo } from 'react';
 import { useTheme } from '../themes';
 import { sanitizeString } from '../engine/security';
@@ -135,4 +137,4 @@ export function TkxAffix({
       </div>
     </>
   );
-}
+}

package/src/components/TkxAlert.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { type ReactNode, useEffect } from 'react';
 import { useTheme } from '../themes';
 import { sanitizeString } from '../engine/security';
@@ -89,4 +91,4 @@ export function TkxAlert({ variant, title, children, dismissible, onDismiss, ico
       )}
     </div>
   );
-}
+}

package/src/components/TkxAnchor.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { useState, useEffect, useCallback, useRef } from 'react';
 import { useTheme } from '../themes';
 import { sanitizeString } from '../engine/security';
@@ -190,4 +192,4 @@ export function TkxAnchor({
       </ul>
     </nav>
   );
-}
+}

package/src/components/TkxAppBar.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import {
   useState,
   useEffect,
@@ -257,4 +259,4 @@ export function TkxAppBar({
       )}
     </header>
   );
-}
+}

package/src/components/TkxAutocomplete.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import {
   useState,
   useRef,
@@ -450,4 +452,4 @@ export function TkxAutocomplete({
   );
 }
 
-export default TkxAutocomplete;
+export default TkxAutocomplete;

package/src/components/TkxAvatar.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { forwardRef, useState, type ImgHTMLAttributes } from 'react';
 import { useTheme } from '../themes';
 import { getAccessibleForeground } from '../engine/wcag';
@@ -98,4 +100,4 @@ export const TkxAvatar = forwardRef<HTMLDivElement, TkxAvatarProps>(
   },
 );
 
-TkxAvatar.displayName = 'TkxAvatar';
+TkxAvatar.displayName = 'TkxAvatar';

package/src/components/TkxBadge.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { forwardRef, type HTMLAttributes } from 'react';
 import { useTheme } from '../themes';
 import { getAccessibleForeground } from '../engine/wcag';
@@ -70,4 +72,4 @@ export const TkxBadge = forwardRef<HTMLSpanElement, TkxBadgeProps>(
   },
 );
 
-TkxBadge.displayName = 'TkxBadge';
+TkxBadge.displayName = 'TkxBadge';

package/src/components/TkxBottomNav.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import {
   useCallback,
   useRef,
@@ -236,4 +238,4 @@ export function TkxBottomNav({
       </div>
     </nav>
   );
-}
+}

package/src/components/TkxBreadcrumb.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import {
   useCallback,
   type ReactNode,
@@ -319,4 +321,4 @@ export function TkxBreadcrumb({
   );
 }
 
-export default TkxBreadcrumb;
+export default TkxBreadcrumb;

package/src/components/TkxButton.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from 'react';
 import { useTheme } from '../themes';
 import { getAccessibleForeground } from '../engine/wcag';
@@ -150,4 +152,4 @@ export const TkxButton = forwardRef<HTMLButtonElement, TkxButtonProps>(
   },
 );
 
-TkxButton.displayName = 'TkxButton';
+TkxButton.displayName = 'TkxButton';

package/src/components/TkxCard.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { forwardRef, type HTMLAttributes, type ReactNode } from 'react';
 import { useTheme } from '../themes';
 import { useReducedMotion } from '../hooks';
@@ -91,4 +93,4 @@ export function TkxCardFooter({ children, className, style, ...rest }: HTMLAttri
       {children}
     </div>
   );
-}
+}

package/src/components/TkxCarousel.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import {
   useState,
   useRef,
@@ -549,4 +551,4 @@ export function TkxCarousel({
   );
 }
 
-TkxCarousel.displayName = 'TkxCarousel';
+TkxCarousel.displayName = 'TkxCarousel';

package/src/components/TkxCascader.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { useState, useRef, useEffect, useCallback } from 'react';
 import { createPortal } from 'react-dom';
 import { useTheme } from '../themes';
@@ -273,4 +275,4 @@ export function TkxCascader({
       {dropdown}
     </div>
   );
-}
+}

package/src/components/TkxChat.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import {
   useState,
   useRef,
@@ -351,4 +353,4 @@ export function TkxChat({
       {inputArea}
     </div>
   );
-}
+}

package/src/components/TkxCheckbox.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import {
   forwardRef,
   useId,
@@ -215,4 +217,4 @@ export const TkxCheckbox = forwardRef<HTMLInputElement, TkxCheckboxProps>(
   },
 );
 
-TkxCheckbox.displayName = 'TkxCheckbox';
+TkxCheckbox.displayName = 'TkxCheckbox';

package/src/components/TkxClock.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import React, {
   useState,
   useEffect,
@@ -598,4 +600,4 @@ export function TkxClock({
   );
 }
 
-TkxClock.displayName = 'TkxClock';
+TkxClock.displayName = 'TkxClock';

package/src/components/TkxColorPicker.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import {
   useState,
   useEffect,
@@ -630,4 +632,4 @@ export function TkxColorPicker({
       )}
     </>
   );
-}
+}

package/src/components/TkxCommand.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import {
   useState,
   useEffect,
@@ -641,4 +643,4 @@ export function TkxCommand({
   );
 }
 
-TkxCommand.displayName = 'TkxCommand';
+TkxCommand.displayName = 'TkxCommand';

package/src/components/TkxConfigProvider.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import {
   createContext,
   useContext,
@@ -455,4 +457,4 @@ export function getLocaleDisplayName(locale: string): string {
 //   const { locale, direction, getSize, cls } = useConfig();
 //   const size = getSize('button', props.size);
 //   const className = cls('button');
-// ══════════════════════════════════════════════════════════════════════════════
+// ══════════════════════════════════════════════════════════════════════════════

package/src/components/TkxDataGrid.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import {
   useState,
   useCallback,
@@ -936,4 +938,4 @@ export function TkxDataGrid<T = any>({
       )}
     </div>
   );
-}
+}

package/src/components/TkxDatePicker.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import {
   useState,
   useRef,
@@ -102,19 +104,74 @@ function isRangeEndpoint(d: Date, start: Date | null, end: Date | null): boolean
   return false;
 }
 
-function formatDate(d: Date | null | undefined, locale = 'en-US'): string {
+/**
+ * Format a date using either a custom token-based `dateFormat` string
+ * (e.g. "YYYY-MM-DD", "DD/MM/YYYY", "MMM D, YYYY") or fall back to the
+ * locale's 2-digit date style.
+ *
+ * Supported tokens: YYYY, YY, MMMM, MMM, MM, M, DD, D.
+ */
+function formatDate(
+  d: Date | null | undefined,
+  locale = 'en-US',
+  dateFormat?: string,
+): string {
   if (!d) return '';
+  if (dateFormat) {
+    const yyyy = String(d.getFullYear());
+    const yy = yyyy.slice(-2);
+    const M = d.getMonth() + 1;
+    const MM = String(M).padStart(2, '0');
+    const MMM = MONTH_ABBR[d.getMonth()];
+    const MMMM = MONTH_NAMES[d.getMonth()];
+    const D = d.getDate();
+    const DD = String(D).padStart(2, '0');
+    // Order matters: longest tokens first so "MM" doesn't clobber "MMM".
+    return dateFormat
+      .replace(/YYYY/g, yyyy)
+      .replace(/YY/g, yy)
+      .replace(/MMMM/g, MMMM)
+      .replace(/MMM/g, MMM)
+      .replace(/MM/g, MM)
+      .replace(/\bM\b/g, String(M))
+      .replace(/DD/g, DD)
+      .replace(/\bD\b/g, String(D));
+  }
   return d.toLocaleDateString(locale, { month: '2-digit', day: '2-digit', year: 'numeric' });
 }
 
-function parseDate(str: string): Date | null {
-  const match = str.match(/^(\d{1,2})\/(\d{1,2})\/(\d{4})$/);
-  if (!match) return null;
-  const [, m, d, y] = match.map(Number);
-  if (m < 1 || m > 12 || d < 1 || d > 31) return null;
-  const date = new Date(y, m - 1, d);
-  if (date.getMonth() !== m - 1) return null;
-  return date;
+/**
+ * Parse a date string. Accepts US MM/DD/YYYY and common ISO-ish shapes
+ * (YYYY-MM-DD, DD/MM/YYYY, D/M/YYYY). If `dateFormat` is supplied and the
+ * input doesn't match any format, we attempt a token-driven parse.
+ */
+function parseDate(str: string, dateFormat?: string): Date | null {
+  // MM/DD/YYYY (legacy default)
+  const us = str.match(/^(\d{1,2})\/(\d{1,2})\/(\d{4})$/);
+  if (us) {
+    const [, m, d, y] = us.map(Number);
+    if (m >= 1 && m <= 12 && d >= 1 && d <= 31) {
+      const date = new Date(y, m - 1, d);
+      if (date.getMonth() === m - 1) return date;
+    }
+  }
+  // YYYY-MM-DD
+  const iso = str.match(/^(\d{4})-(\d{1,2})-(\d{1,2})$/);
+  if (iso) {
+    const [, y, m, d] = iso.map(Number);
+    const date = new Date(y, m - 1, d);
+    if (date.getMonth() === m - 1) return date;
+  }
+  // DD/MM/YYYY when user explicitly asked for a DD-first format
+  if (dateFormat && /^DD/.test(dateFormat)) {
+    const eu = str.match(/^(\d{1,2})\/(\d{1,2})\/(\d{4})$/);
+    if (eu) {
+      const [, d, m, y] = eu.map(Number);
+      const date = new Date(y, m - 1, d);
+      if (date.getMonth() === m - 1) return date;
+    }
+  }
+  return null;
 }
 
 function getDaysInMonth(year: number, month: number): number {
@@ -563,6 +620,7 @@ export function TkxDatePicker({
   maxDate,
   disabledDates,
   locale = 'en-US',
+  dateFormat,
   showTime = false,
   timeValue,
   onTimeChange,
@@ -624,10 +682,10 @@ export function TkxDatePicker({
   // UI
   const [open, setOpen] = useState(false);
   const [inputValue, setInputValue] = useState(() => {
-    if (mode === 'single') return formatDate(selectedDate, locale);
+    if (mode === 'single') return formatDate(selectedDate, locale, dateFormat);
     if (mode === 'range') {
       const [s, e] = selectedRange;
-      if (s && e) return `${formatDate(s, locale)} – ${formatDate(e, locale)}`;
+      if (s && e) return `${formatDate(s, locale, dateFormat)} – ${formatDate(e, locale, dateFormat)}`;
     }
     return '';
   });
@@ -646,13 +704,13 @@ export function TkxDatePicker({
 
   useEffect(() => {
     if (mode === 'single') {
-      setInputValue(formatDate(selectedDate, locale));
+      setInputValue(formatDate(selectedDate, locale, dateFormat));
     } else if (mode === 'range') {
       const [s, e] = selectedRange;
       if (s && e) {
-        setInputValue(`${formatDate(s, locale)} – ${formatDate(e, locale)}`);
+        setInputValue(`${formatDate(s, locale, dateFormat)} – ${formatDate(e, locale, dateFormat)}`);
       } else if (s) {
-        setInputValue(formatDate(s, locale));
+        setInputValue(formatDate(s, locale, dateFormat));
       } else {
         setInputValue('');
       }
@@ -660,7 +718,7 @@ export function TkxDatePicker({
       setInputValue(multiDates.length > 0 ? `${multiDates.length} date${multiDates.length !== 1 ? 's' : ''} selected` : '');
     }
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [selectedDate, selectedRange, multiDates, mode, locale]);
+  }, [selectedDate, selectedRange, multiDates, mode, locale, dateFormat]);
 
   // ── Position popup ───────────────────────────────────────────────────────────
 
@@ -734,7 +792,7 @@ export function TkxDatePicker({
         } else {
           if (!isSingleControlled) setInternalDate(d);
           onChange?.(d);
-          setInputValue(formatDate(d, locale));
+          setInputValue(formatDate(d, locale, dateFormat));
           setOpen(false);
         }
       } else if (mode === 'range') {
@@ -820,7 +878,7 @@ export function TkxDatePicker({
   const handleInputChange = (v: string) => {
     setInputValue(v);
     if (mode === 'single') {
-      const parsed = parseDate(v);
+      const parsed = parseDate(v, dateFormat);
       if (parsed && !isDateDisabled(parsed)) {
         if (!isSingleControlled) setInternalDate(parsed);
         onChange?.(parsed);
@@ -1564,4 +1622,4 @@ export function TkxDatePicker({
   );
 }
 
-TkxDatePicker.displayName = 'TkxDatePicker';
+TkxDatePicker.displayName = 'TkxDatePicker';

package/src/components/TkxDivider.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { forwardRef, type HTMLAttributes } from 'react';
 import { useTheme } from '../themes';
 import { sanitizeString } from '../engine/security';
@@ -46,4 +48,4 @@ export const TkxDivider = forwardRef<HTMLHRElement, TkxDividerProps>(
   },
 );
 
-TkxDivider.displayName = 'TkxDivider';
+TkxDivider.displayName = 'TkxDivider';

package/src/components/TkxDrawer.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import {
   useEffect,
   useId,
@@ -231,4 +233,4 @@ export function TkxDrawer({
     </div>,
     document.body,
   );
-}
+}

package/src/components/TkxDropdown.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import {
   useState,
   useRef,
@@ -799,4 +801,4 @@ export function TkxDropdown({
   );
 }
 
-export default TkxDropdown;
+export default TkxDropdown;

package/src/components/TkxEmpty.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { type ReactNode, type CSSProperties, createElement } from 'react';
 import { useTheme } from '../themes';
 import { sanitizeString } from '../engine/security';
@@ -216,4 +218,4 @@ export function TkxEmpty({
         children,
       ),
   );
-}
+}

package/src/components/TkxFileUpload.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import {
   useState,
   useRef,
@@ -368,4 +370,4 @@ export function TkxFileUpload({
       )}
     </div>
   );
-}
+}

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