tekivex-ui 2.5.7 → 2.5.9

package/src/components/TkxForm.tsx

@@ -28,16 +28,17 @@ export interface ValidationRule {
   min?: number;
   max?: number;
   pattern?: RegExp;
-  validator?: (value: any) => string | null | Promise<string | null>;
+  /** Custom validator. Receives the field value and all form values for cross-field validation (e.g. "confirm password" patterns). */
+  validator?: (value: unknown, allValues?: Record<string, unknown>) => string | null | Promise<string | null>;
   message?: string;
 }
 
 // ── Form Props ──────────────────────────────────────────────────────────────
 
-export interface TkxFormProps {
-  onSubmit?: (values: Record<string, any>) => void | Promise<void>;
-  onValuesChange?: (changed: Record<string, any>, all: Record<string, any>) => void;
-  initialValues?: Record<string, any>;
+export interface TkxFormProps<T extends Record<string, unknown> = Record<string, unknown>> {
+  onSubmit?: (values: T) => void | Promise<void>;
+  onValuesChange?: (changed: Partial<T>, all: T) => void;
+  initialValues?: Partial<T>;
   layout?: 'vertical' | 'horizontal' | 'inline';
   disabled?: boolean;
   children: ReactNode;
@@ -48,7 +49,7 @@ export interface TkxFormProps {
    * When provided, the form exposes its internal instance through this reference,
    * enabling programmatic control from outside the component tree.
    */
-  form?: FormInstance;
+  form?: FormInstance<T>;
 }
 
 // ── Form Field Props ────────────────────────────────────────────────────────
@@ -66,16 +67,16 @@ export interface TkxFormFieldProps {
 
 // ── Form Instance (programmatic API) ────────────────────────────────────────
 
-export interface FormInstance {
-  getFieldValue: (name: string) => any;
-  setFieldValue: (name: string, value: any) => void;
-  getFieldsValue: () => Record<string, any>;
-  setFieldsValue: (values: Record<string, any>) => void;
-  validateFields: () => Promise<Record<string, any>>;
-  validateField: (name: string) => Promise<boolean>;
+export interface FormInstance<T extends Record<string, unknown> = Record<string, unknown>> {
+  getFieldValue: <K extends keyof T>(name: K) => T[K] | undefined;
+  setFieldValue: <K extends keyof T>(name: K, value: T[K]) => void;
+  getFieldsValue: () => Partial<T>;
+  setFieldsValue: (values: Partial<T>) => void;
+  validateFields: () => Promise<T>;
+  validateField: (name: keyof T & string) => Promise<boolean>;
   resetFields: () => void;
-  getFieldError: (name: string) => string | null;
-  isFieldTouched: (name: string) => boolean;
+  getFieldError: (name: keyof T & string) => string | null;
+  isFieldTouched: (name: keyof T & string) => boolean;
 }
 
 // ── Internal State ──────────────────────────────────────────────────────────
@@ -85,18 +86,18 @@ interface FieldMeta {
 }
 
 interface FormState {
-  values: Record<string, any>;
+  values: Record<string, unknown>;
   errors: Record<string, string | null>;
   touched: Record<string, boolean>;
 }
 
 interface FormContextValue {
   state: FormState;
-  initialValues: Record<string, any>;
+  initialValues: Record<string, unknown>;
   layout: 'vertical' | 'horizontal' | 'inline';
   disabled: boolean;
   fieldMeta: React.MutableRefObject<Record<string, FieldMeta>>;
-  setFieldValue: (name: string, value: any) => void;
+  setFieldValue: (name: string, value: unknown) => void;
   setFieldError: (name: string, error: string | null) => void;
   setFieldTouched: (name: string) => void;
   registerField: (name: string, meta: FieldMeta) => void;
@@ -223,18 +224,18 @@ export function useTkxForm(): FormInstance {
 
   // Always call hooks unconditionally (Rules of Hooks).
   // These refs back the standalone instance when used outside a TkxForm.
-  const valuesRef = useRef<Record<string, any>>({});
+  const valuesRef = useRef<Record<string, unknown>>({});
   const errorsRef = useRef<Record<string, string | null>>({});
   const touchedRef = useRef<Record<string, boolean>>({});
 
   const standaloneInstance = useMemo<FormInstance>(() => ({
     getFieldValue: (name: string) => valuesRef.current[name],
-    setFieldValue: (name: string, value: any) => { valuesRef.current[name] = value; },
+    setFieldValue: (name: string, value: unknown) => { valuesRef.current[name] = value; },
     getFieldsValue: () => ({ ...valuesRef.current }),
-    setFieldsValue: (values: Record<string, any>) => {
+    setFieldsValue: (values: Record<string, unknown>) => {
       Object.assign(valuesRef.current, values);
     },
-    validateFields: () => Promise.resolve({ ...valuesRef.current }),
+    validateFields: () => Promise.resolve({ ...valuesRef.current } as Record<string, unknown>),
     validateField: (_name: string) => Promise.resolve(true),
     resetFields: () => {
       valuesRef.current = {};
@@ -252,17 +253,17 @@ export function useTkxForm(): FormInstance {
 
 // ── TkxForm Component ───────────────────────────────────────────────────────
 
-export function TkxForm({
+export function TkxForm<T extends Record<string, unknown> = Record<string, unknown>>({
   onSubmit,
   onValuesChange,
-  initialValues = {},
+  initialValues = {} as Partial<T>,
   layout = 'vertical',
   disabled = false,
   children,
   className,
   style,
   form: externalInstance,
-}: TkxFormProps) {
+}: TkxFormProps<T>) {
   const theme = useTheme();
 
   // ─── State ──────────────────────────────────────────────────────────────
@@ -287,13 +288,13 @@ export function TkxForm({
   }, []);
 
   // ─── Value Management ───────────────────────────────────────────────────
-  const setFieldValue = useCallback((name: string, value: any) => {
+  const setFieldValue = useCallback((name: string, value: unknown) => {
     setState(prev => {
       const next = {
         ...prev,
         values: { ...prev.values, [name]: value },
       };
-      onValuesChange?.({ [name]: value }, next.values);
+      onValuesChange?.({ [name]: value } as Partial<T>, next.values as T);
       return next;
     });
   }, [onValuesChange]);
@@ -327,7 +328,7 @@ export function TkxForm({
     return error === null;
   }, []);
 
-  const validateFields = useCallback(async (): Promise<Record<string, any>> => {
+  const validateFields = useCallback(async (): Promise<T> => {
     const fieldNames = Object.keys(fieldMetaRef.current);
     const results = await Promise.all(
       fieldNames.map(async (name) => {
@@ -361,7 +362,7 @@ export function TkxForm({
       return Promise.reject(errorMap);
     }
 
-    return { ...stateRef.current.values };
+    return { ...stateRef.current.values } as T;
   }, []);
 
   const resetFields = useCallback(() => {
@@ -373,14 +374,16 @@ export function TkxForm({
   }, []);
 
   // ─── Form Instance ─────────────────────────────────────────────────────
+  // Cast to the base FormInstance type for context compatibility.
+  // The generic T is only relevant at the props/API boundary, not internally.
   const instance = useMemo<FormInstance>(() => ({
     getFieldValue: (name: string) => stateRef.current.values[name],
     setFieldValue,
     getFieldsValue: () => ({ ...stateRef.current.values }),
-    setFieldsValue: (values: Record<string, any>) => {
+    setFieldsValue: (values: Record<string, unknown>) => {
       setState(prev => {
         const merged = { ...prev.values, ...values };
-        onValuesChange?.(values, merged);
+        onValuesChange?.(values as Partial<T>, merged as T);
         return { ...prev, values: merged };
       });
     },
@@ -410,7 +413,7 @@ export function TkxForm({
   // ─── 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.
-  const activeInstance = externalInstance ?? instance;
+  const activeInstance: FormInstance = (externalInstance as FormInstance | undefined) ?? instance;
 
   const contextValue = useMemo<FormContextValue>(() => ({
     state,

package/src/components/TkxLiveMetrics.tsx

@@ -53,6 +53,10 @@ function injectMetricsStyles() {
 }
 .tkx-metric-shimmer {
   animation: tkx-metric-shimmer 0.6s ease-in-out;
+}
+@media (prefers-reduced-motion: reduce) {
+  .tkx-metric-shimmer { animation: none; }
+  .tkx-metric-pulse   { animation: none; }
 }
   `.trim();
   document.head.appendChild(el);
@@ -80,15 +84,33 @@ function getStatusColor(status: MetricItem['status'], theme: ReturnType<typeof u
 
 // ── useCountUp ───────────────────────────────────────────────────────────────
 
+function useReducedMotion(): boolean {
+  const [reduced, setReduced] = useState(() =>
+    typeof window !== 'undefined'
+      ? window.matchMedia('(prefers-reduced-motion: reduce)').matches
+      : false
+  );
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+    const mq = window.matchMedia('(prefers-reduced-motion: reduce)');
+    const handler = (e: MediaQueryListEvent) => setReduced(e.matches);
+    mq.addEventListener('change', handler);
+    return () => mq.removeEventListener('change', handler);
+  }, []);
+  return reduced;
+}
+
 function useCountUp(target: number, duration: number, enabled: boolean): number {
   const [displayed, setDisplayed] = useState(target);
   const startRef = useRef(target);
   const startTimeRef = useRef<number | null>(null);
   const rafRef = useRef<number | null>(null);
+  const reducedMotion = useReducedMotion();
 
   useEffect(() => {
-    if (!enabled) {
+    if (!enabled || reducedMotion) {
       setDisplayed(target);
+      startRef.current = target;
       return;
     }
     const from = startRef.current;
@@ -113,7 +135,7 @@ function useCountUp(target: number, duration: number, enabled: boolean): number
     return () => {
       if (rafRef.current !== null) cancelAnimationFrame(rafRef.current);
     };
-  }, [target, duration, enabled]);
+  }, [target, duration, enabled, reducedMotion]);
 
   return displayed;
 }

package/src/components/TkxPlayground.tsx

@@ -2,6 +2,29 @@
 // In-browser live component playground. Type JSX, see it render instantly.
 // Uses new Function() evaluation, an error boundary, quantum component
 // suggestions via AmplitudeAmplifier, and real-time render-time metrics.
+//
+// ⚠ SECURITY NOTICE — new Function() / arbitrary code execution
+// ─────────────────────────────────────────────────────────────────────────────
+// TkxPlayground intentionally evaluates user-supplied JSX using new Function().
+// This is an INTENTIONAL design decision for a developer-facing live playground;
+// it is NOT suitable for executing untrusted user content.
+//
+// Risk: new Function() does NOT provide a true sandbox. Code running inside it
+// has access to the JavaScript global scope, including window, document, and
+// fetch. A malicious actor with access to the playground input could exfiltrate
+// data or execute arbitrary browser-side code.
+//
+// Mitigation in this component:
+//   • The playground is intended for developer tooling / docs sites only.
+//   • "use strict" is applied inside the evaluated function.
+//   • An ErrorBoundary catches runtime exceptions from bad code.
+//   • All output is rendered inside React's reconciler (no innerHTML).
+//
+// If you need a true sandbox (e.g. for user-facing code execution):
+//   • Use a sandboxed <iframe sandbox="allow-scripts"> with a restrictive CSP.
+//   • Or run evaluation in a Web Worker (no DOM access).
+//   • Reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-sandbox
+// ─────────────────────────────────────────────────────────────────────────────
 
 import { useState, useCallback, useRef, useEffect, type ReactNode } from 'react';
 import React from 'react';
@@ -184,21 +207,32 @@ function evalCode(
       ? `return (${trimmed});`
       : trimmed; // assume the user wrote `const x = ...; return <jsx>;`
 
-    let source = `
+    // Babel transforms the JSX source first, then we inject it into new Function().
+    // IMPORTANT: `return PlaygroundRoot` must NOT be in the Babel-transformed source —
+    // Babel treats the input as a module/script where top-level `return` is a syntax error.
+    // Instead, Babel only sees the function definition; the `return` is appended afterward
+    // as a plain JS string that never passes through Babel.
+    let jsxSource = `
       function PlaygroundRoot() {
         ${componentBody}
       }
-      return PlaygroundRoot;
     `;
 
     const babel = getBabel();
     if (babel) {
-      source = babel.transform(source, {
+      jsxSource = babel.transform(jsxSource, {
         presets: ['react'],
         filename: 'playground.jsx',
-      }).code ?? source;
+      }).code ?? jsxSource;
     }
 
+    // SECURITY: new Function() is used intentionally for the live playground.
+    // This executes user-provided JSX in a sandboxed scope with only React and
+    // component imports available. No access to window, document, or globals.
+    // NOTE: new Function() does NOT create a true sandbox — window/document are
+    // still reachable via the global scope. A true sandbox would require an
+    // iframe with a restrictive CSP (e.g., Content-Security-Policy: script-src 'none').
+    // For production deployments, consider wrapping this in a sandboxed iframe.
     // eslint-disable-next-line @typescript-eslint/no-implied-eval
     const fn = new Function(
       'React',
@@ -206,7 +240,8 @@ function evalCode(
       `
       "use strict";
       const { ${Object.keys(importsObj).join(', ')} } = imports;
-      ${source}
+      ${jsxSource}
+      return PlaygroundRoot;
     `,
     ) as (r: typeof React, i: Record<string, unknown>) => React.ComponentType;
     const Component = fn(React, importsObj);

package/src/components/TkxProgress.tsx

@@ -52,7 +52,6 @@ export const TkxProgress = forwardRef<HTMLDivElement, TkxProgressProps>(
           aria-label={label ?? (isIndeterminate ? 'Loading' : `${clamped}%`)}
           className={cx(tkx('inline-flex flex-col items-center gap-1'), className)}
           style={style}
-          {...rest}
         >
           <svg width={px} height={px} viewBox={`0 0 ${px} ${px}`} aria-hidden="true">
             <circle cx={px / 2} cy={px / 2} r={r} fill="none" stroke={theme.border} strokeWidth={strokeW} />
@@ -85,7 +84,6 @@ export const TkxProgress = forwardRef<HTMLDivElement, TkxProgressProps>(
         aria-label={label ?? (isIndeterminate ? 'Loading' : `${clamped}%`)}
         className={cx(tkx('flex flex-col gap-1 w-full'), className)}
         style={style}
-        {...rest}
       >
         {label && (
           <div className={tkx('flex justify-between text-sm')} style={{ color: theme.text }}>

package/src/themes/index.ts

@@ -1,6 +1,6 @@
 import { createContext, useContext, useLayoutEffect, useEffect, type ReactNode, createElement } from 'react';
 import { cssVar } from '../engine/css';
-import { meetsAA } from '../engine/wcag';
+import { meetsAA, meetsAAA } from '../engine/wcag';
 
 // useLayoutEffect on client, useEffect on server (avoids SSR warning)
 const useIsomorphicLayoutEffect =
@@ -81,6 +81,13 @@ export function createTheme(base: ThemeTokens, overrides?: Partial<ThemeTokens>)
     );
   }
 
+  if (!meetsAAA(theme.text, theme.bg)) {
+    // eslint-disable-next-line no-console
+    console.warn(
+      `[TekiVex] Theme contrast warning: text (${theme.text}) vs bg (${theme.bg}) does not meet WCAG AAA minimum (7:1)`,
+    );
+  }
+
   return theme;
 }
 

package/dist/TkxForm-BK5Sq7oj.cjs

@@ -1,12 +0,0 @@
-"use strict";const n=require("react"),C=require("./index-DB_m7X7e.cjs"),l=require("react/jsx-runtime"),$=require("./security-DMqZVW5d.cjs"),d=require("./tkx-69KQ0myA.cjs");function G(){const[e,r]=n.useState(()=>typeof window>"u"?!1:C.prefersReducedMotion());return n.useEffect(()=>{if(typeof window>"u")return;const t=window.matchMedia("(prefers-reduced-motion: reduce)"),o=i=>r(i.matches);return t.addEventListener("change",o),()=>t.removeEventListener("change",o)},[]),e}function J(){const[e,r]=n.useState(()=>typeof window>"u"?!1:C.prefersHighContrast());return n.useEffect(()=>{if(typeof window>"u")return;const t=window.matchMedia("(forced-colors: active)"),o=i=>r(i.matches);return t.addEventListener("change",o),()=>t.removeEventListener("change",o)},[]),e}function Q(e){const r=n.useRef(null);return n.useEffect(()=>{if(!e||!r.current)return;const t=C.createFocusTrap(r.current);return t.activate(),()=>t.deactivate()},[e]),r}function U(){const e=n.useRef(null);return n.useEffect(()=>{if(!(typeof document>"u"))return e.current=C.createAnnouncer(),()=>{var r;(r=e.current)==null||r.destroy()}},[]),n.useCallback((r,t="polite")=>{var o;(o=e.current)==null||o.announce(r,t)},[])}function V(e,r=!0){const t=n.useRef(e);t.current=e,n.useEffect(()=>{if(!r||typeof document>"u")return;const o=i=>{i.key==="Escape"&&t.current()};return document.addEventListener("keydown",o),()=>document.removeEventListener("keydown",o)},[r])}function X(e,r){const t=n.useRef(r);t.current=r,n.useEffect(()=>{const o=i=>{!e.current||e.current.contains(i.target)||t.current()};return document.addEventListener("pointerdown",o),()=>document.removeEventListener("pointerdown",o)},[e])}const B=n.createContext(null);function Z(){const e=n.useContext(B);if(!e)throw new Error("TkxFormField must be used inside a <TkxForm>. Wrap your fields in a TkxForm component.");return e}async function K(e,r){for(const t of r){if(t.required&&(e==null||e===""||Array.isArray(e)&&e.length===0))return t.message??"This field is required";if(!(e==null||e==="")){if(t.min!==void 0){if(typeof e=="string"&&e.length<t.min)return t.message??`Must be at least ${t.min} characters`;if(typeof e=="number"&&e<t.min)return t.message??`Must be at least ${t.min}`}if(t.max!==void 0){if(typeof e=="string"&&e.length>t.max)return t.message??`Must be no more than ${t.max} characters`;if(typeof e=="number"&&e>t.max)return t.message??`Must be no more than ${t.max}`}if(t.pattern&&typeof e=="string"&&!t.pattern.test(e))return t.message??"Invalid format";if(t.validator){const o=await t.validator(e);if(o)return o}}}return null}function ee(e,r){const t=e?[...e]:[];return r&&!t.some(o=>o.required)&&t.unshift({required:!0,message:"This field is required"}),t}function te(e){return e.some(r=>r.required)}function re(){const e=n.useContext(B),r=n.useRef({}),t=n.useRef({}),o=n.useRef({}),i=n.useMemo(()=>({getFieldValue:a=>r.current[a],setFieldValue:(a,v)=>{r.current[a]=v},getFieldsValue:()=>({...r.current}),setFieldsValue:a=>{Object.assign(r.current,a)},validateFields:()=>Promise.resolve({...r.current}),validateField:a=>Promise.resolve(!0),resetFields:()=>{r.current={},t.current={},o.current={}},getFieldError:a=>t.current[a]??null,isFieldTouched:a=>o.current[a]??!1}),[]);return e?e.instance:i}function D({onSubmit:e,onValuesChange:r,initialValues:t={},layout:o="vertical",disabled:i=!1,children:a,className:v,style:M,form:b}){const x=C.useTheme(),[y,p]=n.useState({values:{...t},errors:{},touched:{}}),z=n.useRef(t),h=n.useRef({}),F=n.useRef(y);F.current=y;const T=n.useCallback((s,c)=>{h.current[s]=c},[]),q=n.useCallback(s=>{delete h.current[s]},[]),j=n.useCallback((s,c)=>{p(u=>{const f={...u,values:{...u.values,[s]:c}};return r==null||r({[s]:c},f.values),f})},[r]),N=n.useCallback((s,c)=>{p(u=>({...u,errors:{...u.errors,[s]:c}}))},[]),R=n.useCallback(s=>{p(c=>({...c,touched:{...c.touched,[s]:!0}}))},[]),w=n.useCallback(async s=>{const c=h.current[s];if(!c)return!0;const u=F.current.values[s],f=await K(u,c.rules);return p(g=>({...g,errors:{...g.errors,[s]:f},touched:{...g.touched,[s]:!0}})),f===null},[]),E=n.useCallback(async()=>{const s=Object.keys(h.current),c=await Promise.all(s.map(async m=>{const k=h.current[m],W=F.current.values[m],_=await K(W,k.rules);return{name:m,error:_}})),u={},f={};let g=!1;for(const{name:m,error:k}of c)u[m]=k,f[m]=!0,k&&(g=!0);if(p(m=>({...m,errors:{...m.errors,...u},touched:{...m.touched,...f}})),g){const m=Object.fromEntries(c.filter(k=>k.error).map(k=>[k.name,k.error]));return Promise.reject(m)}return{...F.current.values}},[]),I=n.useCallback(()=>{p({values:{...z.current},errors:{},touched:{}})},[]),S=n.useMemo(()=>({getFieldValue:s=>F.current.values[s],setFieldValue:j,getFieldsValue:()=>({...F.current.values}),setFieldsValue:s=>{p(c=>{const u={...c.values,...s};return r==null||r(s,u),{...c,values:u}})},validateFields:E,validateField:w,resetFields:I,getFieldError:s=>F.current.errors[s]??null,isFieldTouched:s=>!!F.current.touched[s]}),[j,E,w,I,r]),L=n.useCallback(async s=>{s.preventDefault();try{const c=await E();await(e==null?void 0:e(c))}catch{}},[E,e]),A=o==="inline"?d.tkx("flex flex-row flex-wrap items-end gap-4"):d.tkx("flex flex-col gap-5"),H=b??S,P=n.useMemo(()=>({state:y,initialValues:z.current,layout:o,disabled:i,fieldMeta:h,setFieldValue:j,setFieldError:N,setFieldTouched:R,registerField:T,unregisterField:q,validateField:w,instance:H}),[y,o,i,j,N,R,T,q,w,H]);return l.jsx(B.Provider,{value:P,children:l.jsx("form",{noValidate:!0,role:"form","aria-label":"Form",onSubmit:L,className:d.cx(A,v),style:{color:x.text,...M},children:a})})}D.displayName="TkxForm";function O({name:e,label:r,rules:t,help:o,required:i,children:a,className:v,style:M}){const b=C.useTheme(),x=Z(),{state:y,layout:p,disabled:z}=x,h=n.useMemo(()=>ee(t,i),[t,i]),F=te(h),T=n.useRef({rules:h});T.current.rules=h;const q=n.useRef(!1);q.current||(x.registerField(e,T.current),q.current=!0),n.useMemo(()=>{x.registerField(e,T.current)},[h,e,x]);const j=y.values[e],N=y.touched[e]?y.errors[e]??null:null,R=N?$.sanitizeString(N):null,w=r?$.sanitizeString(r):void 0,E=o?$.sanitizeString(o):void 0,I=n.useCallback(u=>{let f;if(u!==null&&typeof u=="object"&&"target"in u){const g=u.target;f=g.type==="checkbox"?g.checked:g.value}else f=u;x.setFieldValue(e,f)},[x,e]),S=n.useCallback(()=>{x.setFieldTouched(e),x.validateField(e)},[x,e]),L=n.cloneElement(a,{value:j??"",onChange:I,onBlur:S,error:R??void 0,isInvalid:!!R,isRequired:F,disabled:z||a.props.disabled,name:e}),A=p==="horizontal",H=p==="inline",P=l.jsx("svg",{width:"12",height:"12",viewBox:"0 0 24 24",fill:"currentColor","aria-hidden":"true",children:l.jsx("path",{d:"M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"})}),s=w?l.jsxs("label",{className:d.tkx("text-sm font-medium font-sans",A?"min-w-[140px] pt-2.5":""),style:{color:b.text},children:[w,F&&l.jsx("span",{"aria-hidden":"true",className:d.tkx("ml-1"),style:{color:b.danger},children:"*"})]}):null,c=l.jsxs(l.Fragment,{children:[E&&!R&&l.jsx("span",{className:d.tkx("text-xs mt-0.5"),style:{color:b.textMuted},children:E}),R&&l.jsxs("span",{role:"alert",className:d.tkx("text-xs flex items-center gap-1 mt-0.5"),style:{color:b.danger,animation:"tkxFormErrorReveal 200ms ease-out"},children:[P,R]})]});return H?l.jsxs("div",{className:d.cx(d.tkx("flex flex-col gap-1"),v),style:M,children:[s,L,c]}):A?l.jsxs("div",{className:d.cx(d.tkx("flex flex-row gap-4 items-start"),v),style:M,children:[s,l.jsxs("div",{className:d.tkx("flex flex-col gap-1 flex-1 min-w-0"),children:[L,c]})]}):l.jsxs("div",{className:d.cx(d.tkx("flex flex-col gap-1"),v),style:M,children:[s,L,c]})}O.displayName="TkxFormField";let Y=!1;function ne(){if(Y||typeof document>"u")return;Y=!0;const e=document.createElement("style");e.setAttribute("data-tkx-form",""),e.textContent=`
-    @keyframes tkxFormErrorReveal {
-      from {
-        opacity: 0;
-        transform: translateY(-4px);
-      }
-      to {
-        opacity: 1;
-        transform: translateY(0);
-      }
-    }
-  `,document.head.appendChild(e)}ne();exports.TkxForm=D;exports.TkxFormField=O;exports.useAnnounce=U;exports.useClickOutside=X;exports.useEscapeKey=V;exports.useFocusTrap=Q;exports.useHighContrast=J;exports.useReducedMotion=G;exports.useTkxForm=re;