tekivex-ui 2.0.0

package/src/components/TkxTimeline.tsx

@@ -0,0 +1,303 @@
+import { useEffect, useRef, type ReactNode } from 'react';
+import { useTheme } from '../themes';
+import { tkx, cx } from '../engine/tkx';
+import { sanitizeString } from '../engine/security';
+import { useReducedMotion } from '../hooks';
+
+// ── Types ─────────────────────────────────────────────────────────────────────
+
+export type TimelineVariant = 'default' | 'compact' | 'alternating';
+export type TimelineItemStatus = 'completed' | 'active' | 'pending' | 'error';
+
+export interface TimelineItem {
+  id: string;
+  title: ReactNode;
+  description?: ReactNode;
+  timestamp?: string;
+  status?: TimelineItemStatus;
+  icon?: ReactNode;
+  badge?: ReactNode;
+}
+
+export interface TkxTimelineProps {
+  items: TimelineItem[];
+  variant?: TimelineVariant;
+  orientation?: 'vertical' | 'horizontal';
+  connectorStyle?: 'solid' | 'dashed' | 'dotted';
+}
+
+// ── Animation injection ───────────────────────────────────────────────────────
+
+let _timelineStyleInjected = false;
+function injectTimelineStyles() {
+  if (_timelineStyleInjected || typeof document === 'undefined') return;
+  _timelineStyleInjected = true;
+  const style = document.createElement('style');
+  style.textContent = `
+    @keyframes tkx-pulse-dot { 0%,100% { box-shadow:0 0 0 0 currentColor; opacity:1; } 70% { box-shadow:0 0 0 8px transparent; opacity:0.7; } }
+    @keyframes tkx-draw-line { from { transform:scaleY(0); transform-origin:top center; } to { transform:scaleY(1); } }
+    @keyframes tkx-draw-line-h { from { transform:scaleX(0); transform-origin:left center; } to { transform:scaleX(1); } }
+    .tkx-pulse-dot { animation: tkx-pulse-dot 1.5s ease-in-out infinite; }
+    .tkx-draw-v { animation: tkx-draw-line 0.6s ease forwards; }
+    .tkx-draw-h { animation: tkx-draw-line-h 0.6s ease forwards; }
+  `;
+  document.head.appendChild(style);
+}
+
+// ── Status color helper ───────────────────────────────────────────────────────
+
+function useStatusColor(status: TimelineItemStatus = 'pending') {
+  const theme = useTheme();
+  const map: Record<TimelineItemStatus, string> = {
+    completed: theme.success,
+    active: theme.primary,
+    pending: theme.border,
+    error: theme.danger,
+  };
+  return map[status];
+}
+
+// ── Dot component ─────────────────────────────────────────────────────────────
+
+function TimelineDot({
+  status = 'pending',
+  icon,
+  size = 28,
+}: {
+  status?: TimelineItemStatus;
+  icon?: ReactNode;
+  size?: number;
+}) {
+  const theme = useTheme();
+  const reducedMotion = useReducedMotion();
+  const color = useStatusColor(status);
+  const isActive = status === 'active';
+
+  return (
+    <div
+      className={cx(
+        tkx('relative flex items-center justify-center rounded-full shrink-0 z-10'),
+        isActive && !reducedMotion ? 'tkx-pulse-dot' : '',
+      )}
+      style={{
+        width: size,
+        height: size,
+        backgroundColor: status === 'pending' ? theme.surface : color,
+        border: `2px solid ${color}`,
+        color: status === 'pending' ? color : theme.bg,
+      }}
+      aria-hidden="true"
+    >
+      {icon ? (
+        <span style={{ fontSize: size * 0.45, lineHeight: 1 }}>{icon}</span>
+      ) : (
+        <span
+          style={{
+            width: size * 0.35,
+            height: size * 0.35,
+            borderRadius: '50%',
+            backgroundColor: status === 'pending' ? color : theme.bg,
+            display: 'block',
+          }}
+        />
+      )}
+    </div>
+  );
+}
+
+// ── Connector segment ─────────────────────────────────────────────────────────
+
+function VerticalConnector({
+  style: lineStyle,
+  color,
+  animate,
+}: {
+  style: 'solid' | 'dashed' | 'dotted';
+  color: string;
+  animate: boolean;
+}) {
+  const theme = useTheme();
+  return (
+    <div
+      className={cx(tkx('w-0.5 flex-1 min-h-[24px]'), animate ? 'tkx-draw-v' : '')}
+      style={{
+        borderLeft: `2px ${lineStyle} ${color}`,
+        backgroundColor: 'transparent',
+        alignSelf: 'stretch',
+        borderColor: color,
+        marginLeft: 1,
+      }}
+      aria-hidden="true"
+    />
+  );
+}
+
+function HorizontalConnector({
+  style: lineStyle,
+  color,
+  animate,
+}: {
+  style: 'solid' | 'dashed' | 'dotted';
+  color: string;
+  animate: boolean;
+}) {
+  return (
+    <div
+      className={cx(tkx('h-0.5 flex-1 min-w-[24px]'), animate ? 'tkx-draw-h' : '')}
+      style={{
+        borderTop: `2px ${lineStyle} ${color}`,
+        borderColor: color,
+      }}
+      aria-hidden="true"
+    />
+  );
+}
+
+// ── Item content block ────────────────────────────────────────────────────────
+
+function ItemContent({
+  item,
+  compact,
+}: {
+  item: TimelineItem;
+  compact: boolean;
+}) {
+  const theme = useTheme();
+  const safeTimestamp = item.timestamp ? sanitizeString(item.timestamp) : null;
+
+  return (
+    <div className={tkx('flex flex-col gap-0.5', compact ? 'pb-3' : 'pb-5')}>
+      <div className={tkx('flex items-center gap-2 flex-wrap')}>
+        <span
+          className={tkx('text-sm font-semibold leading-snug')}
+          style={{ color: theme.text }}
+        >
+          {typeof item.title === 'string' ? sanitizeString(item.title) : item.title}
+        </span>
+        {item.badge && (
+          <span>{item.badge}</span>
+        )}
+        {safeTimestamp && (
+          <span className={tkx('text-[11px] ml-auto')} style={{ color: theme.textMuted }}>
+            {safeTimestamp}
+          </span>
+        )}
+      </div>
+      {item.description && !compact && (
+        <div className={tkx('text-xs leading-relaxed mt-0.5')} style={{ color: theme.textMuted }}>
+          {typeof item.description === 'string' ? sanitizeString(item.description) : item.description}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ── Main TkxTimeline ──────────────────────────────────────────────────────────
+
+export function TkxTimeline({
+  items,
+  variant = 'default',
+  orientation = 'vertical',
+  connectorStyle = 'solid',
+}: TkxTimelineProps) {
+  const theme = useTheme();
+  const reducedMotion = useReducedMotion();
+  const mounted = useRef(false);
+
+  useEffect(() => {
+    injectTimelineStyles();
+    mounted.current = true;
+  }, []);
+
+  const animate = !reducedMotion;
+  const isCompact = variant === 'compact';
+  const isAlternating = variant === 'alternating' && orientation === 'vertical';
+  const isHorizontal = orientation === 'horizontal';
+
+  if (isHorizontal) {
+    return (
+      <div role="list" aria-label="Timeline" className={tkx('flex items-start w-full overflow-x-auto')}>
+        {items.map((item, idx) => {
+          const status = item.status ?? 'pending';
+          const connColor = status === 'completed' ? theme.success : theme.border;
+          const isLast = idx === items.length - 1;
+
+          return (
+            <div key={item.id} role="listitem" className={tkx('flex items-start flex-1 min-w-0')}>
+              <div className={tkx('flex flex-col items-center flex-1 min-w-0')}>
+                <div className={tkx('flex items-center w-full')}>
+                  {idx > 0 && (
+                    <HorizontalConnector style={connectorStyle} color={connColor} animate={animate} />
+                  )}
+                  <TimelineDot status={status} icon={item.icon} size={24} />
+                  {!isLast && (
+                    <HorizontalConnector style={connectorStyle} color={connColor} animate={animate} />
+                  )}
+                </div>
+                <div className={tkx('mt-2 px-1 text-center min-w-0 w-full')}>
+                  <div className={tkx('text-xs font-semibold truncate')} style={{ color: theme.text }}>
+                    {typeof item.title === 'string' ? sanitizeString(item.title) : item.title}
+                  </div>
+                  {item.timestamp && (
+                    <div className={tkx('text-[10px] mt-0.5')} style={{ color: theme.textMuted }}>
+                      {sanitizeString(item.timestamp)}
+                    </div>
+                  )}
+                </div>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    );
+  }
+
+  // Vertical layouts
+  return (
+    <div role="list" aria-label="Timeline" className={tkx('flex flex-col')}>
+      {items.map((item, idx) => {
+        const status = item.status ?? 'pending';
+        const isLast = idx === items.length - 1;
+        const connColor = status === 'completed' ? theme.success : theme.border;
+        const isRight = isAlternating && idx % 2 === 0;
+
+        if (isAlternating) {
+          return (
+            <div key={item.id} role="listitem" className={tkx('flex items-stretch gap-0')}>
+              {/* Left content (even indexes) */}
+              <div className={tkx('flex-1 flex flex-col items-end pr-4', !isRight ? 'invisible' : '')}>
+                {isRight && <ItemContent item={item} compact={isCompact} />}
+              </div>
+              {/* Center axis */}
+              <div className={tkx('flex flex-col items-center')}>
+                <TimelineDot status={status} icon={item.icon} size={28} />
+                {!isLast && (
+                  <VerticalConnector style={connectorStyle} color={connColor} animate={animate} />
+                )}
+              </div>
+              {/* Right content (odd indexes) */}
+              <div className={tkx('flex-1 flex flex-col items-start pl-4', isRight ? 'invisible' : '')}>
+                {!isRight && <ItemContent item={item} compact={isCompact} />}
+              </div>
+            </div>
+          );
+        }
+
+        // Default / compact — left-side connector
+        return (
+          <div key={item.id} role="listitem" className={tkx('flex gap-3 items-stretch')}>
+            <div className={tkx('flex flex-col items-center')}>
+              <TimelineDot status={status} icon={item.icon} size={isCompact ? 22 : 28} />
+              {!isLast && (
+                <VerticalConnector style={connectorStyle} color={connColor} animate={animate} />
+              )}
+            </div>
+            <div className={tkx('flex-1 min-w-0 pt-0.5')}>
+              <ItemContent item={item} compact={isCompact} />
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}

package/src/components/TkxToast.tsx

@@ -0,0 +1,284 @@
+import {
+  useState,
+  useEffect,
+  useCallback,
+  useRef,
+  useId,
+  type ReactNode,
+} from 'react';
+import { createPortal } from 'react-dom';
+import { useTheme } from '../themes';
+import { sanitizeString } from '../engine/security';
+import { useReducedMotion } from '../hooks';
+import { tkx } from '../engine/tkx';
+
+// ── Types ─────────────────────────────────────────────────────────────────────
+
+export type ToastVariant = 'default' | 'success' | 'danger' | 'warning' | 'info';
+export type ToastPosition = 'top-right' | 'top-left' | 'top-center' | 'bottom-right' | 'bottom-left' | 'bottom-center';
+
+export interface ToastItem {
+  id: string;
+  title?: string;
+  description?: string;
+  variant?: ToastVariant;
+  duration?: number;
+  action?: { label: string; onClick: () => void };
+}
+
+export interface TkxToastProps {
+  position?: ToastPosition;
+}
+
+// ── Module-level store ────────────────────────────────────────────────────────
+
+type Listener = (toasts: ToastItem[]) => void;
+
+const MAX_VISIBLE = 5;
+let queue: ToastItem[] = [];
+let visible: ToastItem[] = [];
+const listeners = new Set<Listener>();
+const timers = new Map<string, ReturnType<typeof setTimeout>>();
+
+function notify() {
+  const snapshot = [...visible];
+  listeners.forEach((fn) => fn(snapshot));
+}
+
+function scheduleRemove(id: string, duration: number) {
+  if (duration === 0) return;
+  timers.set(id, setTimeout(() => removeToast(id), duration));
+}
+
+function removeToast(id: string) {
+  clearTimeout(timers.get(id));
+  timers.delete(id);
+  const wasVisible = visible.some((t) => t.id === id);
+  visible = visible.filter((t) => t.id !== id);
+  queue = queue.filter((t) => t.id !== id);
+  if (wasVisible && queue.length > 0 && visible.length < MAX_VISIBLE) {
+    const next = queue.shift()!;
+    visible = [...visible, next];
+    scheduleRemove(next.id, next.duration ?? 4000);
+  }
+  notify();
+}
+
+function addToast(item: Omit<ToastItem, 'id'>): string {
+  const id = `tkx-toast-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`;
+  const toast: ToastItem = { ...item, id, duration: item.duration ?? 4000 };
+  if (visible.length < MAX_VISIBLE) {
+    visible = [...visible, toast];
+    scheduleRemove(id, toast.duration!);
+  } else {
+    queue = [...queue, toast];
+  }
+  notify();
+  return id;
+}
+
+function dismissAll() {
+  timers.forEach((t) => clearTimeout(t));
+  timers.clear();
+  visible = [];
+  queue = [];
+  notify();
+}
+
+// ── Hook ──────────────────────────────────────────────────────────────────────
+
+export function useToast() {
+  const toast = useCallback((item: Omit<ToastItem, 'id'>) => addToast(item), []);
+  const dismiss = useCallback((id: string) => removeToast(id), []);
+  const dismissAllToasts = useCallback(() => dismissAll(), []);
+  return { toast, dismiss, dismissAll: dismissAllToasts };
+}
+
+// ── Variant config ────────────────────────────────────────────────────────────
+
+const VARIANT_ICONS: Record<ToastVariant, ReactNode> = {
+  default: (
+    <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+      <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-6h2v6zm0-8h-2V7h2v2z" />
+    </svg>
+  ),
+  success: (
+    <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+      <path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm-2 14.5l-4-4 1.41-1.41L10 13.67l6.59-6.59L18 8.5l-8 8z" />
+    </svg>
+  ),
+  danger: (
+    <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+      <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" />
+    </svg>
+  ),
+  warning: (
+    <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+      <path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" />
+    </svg>
+  ),
+  info: (
+    <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+      <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-6h2v6zm0-8h-2V7h2v2z" />
+    </svg>
+  ),
+};
+
+// ── Position styles ───────────────────────────────────────────────────────────
+
+const POSITION_STYLES: Record<ToastPosition, React.CSSProperties> = {
+  'top-right':    { top: 16, right: 16, alignItems: 'flex-end' },
+  'top-left':     { top: 16, left: 16, alignItems: 'flex-start' },
+  'top-center':   { top: 16, left: '50%', transform: 'translateX(-50%)', alignItems: 'center' },
+  'bottom-right': { bottom: 16, right: 16, alignItems: 'flex-end' },
+  'bottom-left':  { bottom: 16, left: 16, alignItems: 'flex-start' },
+  'bottom-center':{ bottom: 16, left: '50%', transform: 'translateX(-50%)', alignItems: 'center' },
+};
+
+function slideInStyle(position: ToastPosition, reduced: boolean): React.CSSProperties {
+  if (reduced) return {};
+  const isTop = position.startsWith('top');
+  return {
+    animation: `tkx-toast-slide-${isTop ? 'down' : 'up'} 220ms cubic-bezier(0.16,1,0.3,1) both`,
+  };
+}
+
+// ── Single toast card ─────────────────────────────────────────────────────────
+
+interface ToastCardProps {
+  toast: ToastItem;
+  position: ToastPosition;
+  onDismiss: (id: string) => void;
+  reduced: boolean;
+}
+
+function ToastCard({ toast, position, onDismiss, reduced }: ToastCardProps) {
+  const theme = useTheme();
+  const labelId = useId();
+
+  const variantColorMap: Record<ToastVariant, string> = {
+    default: theme.textMuted,
+    success: theme.success,
+    danger:  theme.danger,
+    warning: theme.warning,
+    info:    theme.info,
+  };
+
+  const variant = toast.variant ?? 'default';
+  const accentColor = variantColorMap[variant];
+  const isDanger = variant === 'danger';
+  const safeTitle = toast.title ? sanitizeString(toast.title) : undefined;
+  const safeDesc  = toast.description ? sanitizeString(toast.description) : undefined;
+
+  return (
+    <div
+      role={isDanger ? 'alert' : 'status'}
+      aria-live={isDanger ? 'assertive' : 'polite'}
+      aria-atomic="true"
+      aria-labelledby={safeTitle ? labelId : undefined}
+      className={tkx('flex items-start gap-3 px-4 py-3 rounded-lg shadow-lg font-sans min-w-[280px] max-w-[380px]')}
+      style={{
+        backgroundColor: theme.surface,
+        border: `1px solid ${accentColor}55`,
+        boxShadow: `0 8px 24px ${theme.bg}cc`,
+        color: theme.text,
+        ...slideInStyle(position, reduced),
+      }}
+    >
+      <span className={tkx('shrink-0 mt-[2px]')} style={{ color: accentColor }}>
+        {VARIANT_ICONS[variant]}
+      </span>
+
+      <div className={tkx('flex-1 min-w-0')}>
+        {safeTitle && (
+          <p id={labelId} className={tkx('m-0 font-semibold text-sm leading-snug')}>
+            {safeTitle}
+          </p>
+        )}
+        {safeDesc && (
+          <p className={tkx('m-0 text-xs mt-[2px] leading-relaxed')} style={{ color: theme.textMuted }}>
+            {safeDesc}
+          </p>
+        )}
+        {toast.action && (
+          <button
+            onClick={() => { toast.action!.onClick(); onDismiss(toast.id); }}
+            className={tkx('border-none bg-transparent cursor-pointer p-0 mt-2 text-xs font-semibold focus-visible:focus-ring')}
+            style={{ color: accentColor }}
+          >
+            {sanitizeString(toast.action.label)}
+          </button>
+        )}
+      </div>
+
+      <button
+        aria-label="Dismiss notification"
+        onClick={() => onDismiss(toast.id)}
+        className={tkx('bg-transparent border-none cursor-pointer rounded p-[2px] shrink-0 flex items-center justify-center focus-visible:focus-ring')}
+        style={{ color: theme.textMuted }}
+      >
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2.5} aria-hidden="true">
+          <line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" />
+        </svg>
+      </button>
+    </div>
+  );
+}
+
+// ── Provider ──────────────────────────────────────────────────────────────────
+
+export function TkxToastProvider({ position = 'top-right' }: TkxToastProps) {
+  const [toasts, setToasts] = useState<ToastItem[]>([...visible]);
+  const reduced = useReducedMotion();
+
+  useEffect(() => {
+    setToasts([...visible]);
+    const handler: Listener = (next) => setToasts([...next]);
+    listeners.add(handler);
+    return () => { listeners.delete(handler); };
+  }, []);
+
+  const isBottom = position.startsWith('bottom');
+  const posStyle = POSITION_STYLES[position];
+
+  // Inject keyframes once
+  const injectedRef = useRef(false);
+  useEffect(() => {
+    if (injectedRef.current || typeof document === 'undefined') return;
+    injectedRef.current = true;
+    if (!document.getElementById('tkx-toast-kf')) {
+      const style = document.createElement('style');
+      style.id = 'tkx-toast-kf';
+      style.textContent = `
+        @keyframes tkx-toast-slide-down {
+          from { opacity: 0; transform: translateY(-16px); }
+          to   { opacity: 1; transform: translateY(0); }
+        }
+        @keyframes tkx-toast-slide-up {
+          from { opacity: 0; transform: translateY(16px); }
+          to   { opacity: 1; transform: translateY(0); }
+        }
+      `;
+      document.head.appendChild(style);
+    }
+  }, []);
+
+  if (typeof document === 'undefined') return null;
+
+  const ordered = isBottom ? [...toasts].reverse() : toasts;
+
+  return createPortal(
+    <div
+      aria-label="Notifications"
+      className={tkx('fixed z-[9999] flex flex-col gap-2 pointer-events-none')}
+      style={posStyle}
+    >
+      {ordered.map((t) => (
+        <div key={t.id} className={tkx('pointer-events-auto')}>
+          <ToastCard toast={t} position={position} onDismiss={removeToast} reduced={reduced} />
+        </div>
+      ))}
+    </div>,
+    document.body,
+  );
+}

package/src/components/TkxToggle.tsx

@@ -0,0 +1,93 @@
+import { forwardRef, useId, type ButtonHTMLAttributes } from 'react';
+import { useTheme } from '../themes';
+import { useReducedMotion } from '../hooks';
+import { validateProps } from '../engine/security';
+import { tkx, cx } from '../engine/tkx';
+
+export type ToggleSize = 'sm' | 'md' | 'lg';
+
+export interface TkxToggleProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onChange'> {
+  checked: boolean;
+  onChange: (checked: boolean) => void;
+  label: string;
+  size?: ToggleSize;
+  hideLabel?: boolean;
+}
+
+const SIZES: Record<ToggleSize, { tw: number; th: number; td: number; gap: number }> = {
+  sm: { tw: 28, th: 16, td: 10, gap: 3 },
+  md: { tw: 40, th: 22, td: 14, gap: 4 },
+  lg: { tw: 52, th: 28, td: 18, gap: 5 },
+};
+
+export const TkxToggle = forwardRef<HTMLButtonElement, TkxToggleProps>(
+  ({ checked, onChange, label, size = 'md', hideLabel, disabled, className, style, ...rest }, ref) => {
+    const theme = useTheme();
+    const reducedMotion = useReducedMotion();
+    const id = useId();
+
+    validateProps(
+      { label, checked },
+      { label: { type: 'string', required: true }, checked: { type: 'boolean', required: true } },
+    );
+
+    const { tw, th, td, gap } = SIZES[size];
+    const thumbOffset = checked ? tw - td - gap : gap;
+    const trackBg = checked ? theme.primary : theme.border;
+
+    return (
+      <div
+        className={cx(tkx('inline-flex items-center gap-2', disabled ? 'opacity-50' : ''), className)}
+        style={style}
+      >
+        {!hideLabel && (
+          <label
+            htmlFor={id}
+            className={tkx('text-sm font-sans', disabled ? 'cursor-not-allowed' : 'cursor-pointer', 'select-none')}
+            style={{ color: theme.text }}
+          >
+            {label}
+          </label>
+        )}
+        <button
+          ref={ref}
+          id={id}
+          role="switch"
+          aria-checked={checked}
+          aria-label={hideLabel ? label : undefined}
+          disabled={disabled}
+          onClick={() => !disabled && onChange(!checked)}
+          onKeyDown={(e) => {
+            if ((e.key === 'Enter' || e.key === ' ') && !disabled) {
+              e.preventDefault();
+              onChange(!checked);
+            }
+          }}
+          className={cx(
+            tkx('relative border-none p-0 outline-none shrink-0 focus-visible:focus-ring',
+              disabled ? 'cursor-not-allowed' : 'cursor-pointer',
+              !reducedMotion && 'transition-colors duration-200',
+            ),
+          )}
+          style={{ width: tw, height: th, borderRadius: th, backgroundColor: trackBg }}
+          {...rest}
+        >
+          <span
+            aria-hidden="true"
+            className={tkx('absolute rounded-full')}
+            style={{
+              top: '50%', left: thumbOffset,
+              width: td, height: td,
+              transform: 'translateY(-50%)',
+              backgroundColor: '#ffffff',
+              boxShadow: '0 1px 3px rgba(0,0,0,0.3)',
+              transition: reducedMotion ? 'none' : 'left 200ms ease',
+            }}
+          />
+        </button>
+      </div>
+    );
+  },
+);
+
+TkxToggle.displayName = 'TkxToggle';