tekivex-ui 2.5.15 → 2.6.0

package/src/components/TkxTimeline.tsx

@@ -1,305 +0,0 @@
-'use client';
-
-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

@@ -1,287 +0,0 @@
-'use client';
-
-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;
-  children?: React.ReactNode;
-}
-
-// ── 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', children }: 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 <>{children}</>;
-
-  const ordered = isBottom ? [...toasts].reverse() : toasts;
-
-  return <>{children}{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

@@ -1,95 +0,0 @@
-'use client';
-
-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';