tekivex-ui 2.0.0

package/src/components/TkxImage.tsx

@@ -0,0 +1,277 @@
+import {
+  useState,
+  useEffect,
+  useCallback,
+  useRef,
+  type ReactNode,
+  type ImgHTMLAttributes,
+} from 'react';
+import { createPortal } from 'react-dom';
+import { useTheme } from '../themes';
+import { sanitizeString } from '../engine/security';
+import { useReducedMotion } from '../hooks';
+import { tkx, cx } from '../engine/tkx';
+
+export type ImageFit = 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';
+export type ImageRatio = '1/1' | '4/3' | '16/9' | '3/2' | '9/16' | 'auto';
+
+export interface TkxImageProps extends Omit<ImgHTMLAttributes<HTMLImageElement>, 'src'> {
+  src: string;
+  fallback?: ReactNode;
+  placeholder?: 'blur' | 'skeleton' | 'none';
+  fit?: ImageFit;
+  ratio?: ImageRatio;
+  radius?: 'none' | 'sm' | 'md' | 'lg' | 'full';
+  caption?: string;
+  lazy?: boolean;
+  preview?: boolean;
+}
+
+const RATIO_PADDING: Record<Exclude<ImageRatio, 'auto'>, string> = {
+  '1/1':  '100%',
+  '4/3':  '75%',
+  '16/9': '56.25%',
+  '3/2':  '66.666%',
+  '9/16': '177.777%',
+};
+
+const RADIUS_MAP: Record<NonNullable<TkxImageProps['radius']>, string> = {
+  none: '0',
+  sm:   '4px',
+  md:   '8px',
+  lg:   '16px',
+  full: '9999px',
+};
+
+function BrokenImagePlaceholder({ color, size }: { color: string; size: number }) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke={color}
+      strokeWidth={1.5}
+      aria-hidden="true"
+    >
+      <rect x="3" y="3" width="18" height="18" rx="2" />
+      <circle cx="8.5" cy="8.5" r="1.5" />
+      <path d="M21 15l-5-5L5 21" />
+    </svg>
+  );
+}
+
+export function TkxImage({
+  src,
+  alt,
+  fallback,
+  placeholder = 'skeleton',
+  fit = 'cover',
+  ratio = 'auto',
+  radius = 'none',
+  caption,
+  lazy = false,
+  preview = false,
+  className,
+  style,
+  ...rest
+}: TkxImageProps) {
+  const theme = useTheme();
+  const reducedMotion = useReducedMotion();
+  const [loaded, setLoaded] = useState(false);
+  const [errored, setErrored] = useState(false);
+  const [lightboxOpen, setLightboxOpen] = useState(false);
+  const imgRef = useRef<HTMLImageElement>(null);
+
+  const safeSrc = sanitizeString(src);
+  const safeAlt = alt ? sanitizeString(alt) : '';
+  const safeCaption = caption ? sanitizeString(caption) : '';
+  const borderRadius = RADIUS_MAP[radius];
+
+  // Check if image is already cached / complete
+  useEffect(() => {
+    if (imgRef.current?.complete) {
+      setLoaded(true);
+    }
+  }, []);
+
+  const handleLoad = useCallback(() => setLoaded(true), []);
+  const handleError = useCallback(() => setErrored(true), []);
+
+  const openLightbox = useCallback(() => {
+    if (preview && !errored) setLightboxOpen(true);
+  }, [preview, errored]);
+
+  const closeLightbox = useCallback(() => setLightboxOpen(false), []);
+
+  useEffect(() => {
+    if (!lightboxOpen) return;
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') closeLightbox();
+    };
+    document.addEventListener('keydown', handler);
+    return () => document.removeEventListener('keydown', handler);
+  }, [lightboxOpen, closeLightbox]);
+
+  const showSkeleton = placeholder === 'skeleton' && !loaded && !errored;
+
+  const shimmerStyle = showSkeleton && !reducedMotion
+    ? { animation: 'tkx-shimmer 1.5s ease-in-out infinite' }
+    : {};
+
+  const imgElement = !errored ? (
+    <img
+      ref={imgRef}
+      src={safeSrc}
+      alt={safeAlt || undefined}
+      role={safeAlt ? undefined : 'img'}
+      aria-label={safeAlt ? undefined : 'Image'}
+      loading={lazy ? 'lazy' : undefined}
+      onLoad={handleLoad}
+      onError={handleError}
+      onClick={preview ? openLightbox : undefined}
+      className={cx(
+        tkx('block w-full h-full'),
+        preview && !errored ? tkx('cursor-pointer') : '',
+      )}
+      style={{
+        objectFit: fit,
+        borderRadius,
+        opacity: loaded ? 1 : 0,
+        transition: reducedMotion ? 'none' : 'opacity 200ms ease',
+        position: ratio === 'auto' ? undefined : 'absolute',
+        inset: ratio === 'auto' ? undefined : 0,
+      }}
+      {...rest}
+    />
+  ) : null;
+
+  const errorElement = errored ? (
+    fallback ? (
+      <>{fallback}</>
+    ) : (
+      <div
+        role="img"
+        aria-label={safeAlt || 'Image failed to load'}
+        className={tkx('flex flex-col items-center justify-center gap-2 w-full h-full')}
+        style={{
+          backgroundColor: theme.surfaceAlt,
+          borderRadius,
+          color: theme.textMuted,
+          minHeight: '80px',
+        }}
+      >
+        <BrokenImagePlaceholder color={theme.textMuted} size={32} />
+        <span className={tkx('text-xs')} style={{ color: theme.textMuted }}>
+          Failed to load
+        </span>
+      </div>
+    )
+  ) : null;
+
+  const skeletonElement = showSkeleton ? (
+    <div
+      aria-hidden="true"
+      style={{
+        position: ratio === 'auto' ? undefined : 'absolute',
+        inset: ratio === 'auto' ? undefined : 0,
+        width: '100%',
+        height: ratio === 'auto' ? '100%' : undefined,
+        minHeight: ratio === 'auto' ? '80px' : undefined,
+        borderRadius,
+        backgroundColor: theme.surfaceAlt,
+        ...shimmerStyle,
+      }}
+    />
+  ) : null;
+
+  const inner =
+    ratio === 'auto' ? (
+      <div className={tkx('relative w-full')} style={{ borderRadius }}>
+        {skeletonElement}
+        {imgElement}
+        {errorElement}
+      </div>
+    ) : (
+      <div
+        className={tkx('relative w-full overflow-hidden')}
+        style={{ paddingBottom: RATIO_PADDING[ratio as Exclude<ImageRatio, 'auto'>], borderRadius }}
+      >
+        {skeletonElement}
+        {imgElement}
+        {errorElement}
+      </div>
+    );
+
+  const content = safeCaption ? (
+    <figure className={tkx('m-0 p-0 flex flex-col gap-2')} style={{ borderRadius }}>
+      {inner}
+      <figcaption
+        className={tkx('text-sm text-center')}
+        style={{ color: theme.textMuted }}
+      >
+        {safeCaption}
+      </figcaption>
+    </figure>
+  ) : (
+    inner
+  );
+
+  const wrapped = (
+    <div className={cx(tkx('inline-block w-full'), className)} style={style}>
+      {content}
+    </div>
+  );
+
+  const lightbox =
+    lightboxOpen && typeof document !== 'undefined'
+      ? createPortal(
+          <div
+            role="dialog"
+            aria-modal="true"
+            aria-label={safeAlt || 'Image preview'}
+            className={tkx('fixed inset-0 z-[9500] flex items-center justify-center p-4')}
+            onClick={closeLightbox}
+          >
+            <div
+              aria-hidden="true"
+              className={tkx('absolute inset-0')}
+              style={{ backgroundColor: 'rgba(0,0,0,0.85)', backdropFilter: 'blur(6px)' }}
+            />
+            <img
+              src={safeSrc}
+              alt={safeAlt || 'Full-size preview'}
+              onClick={(e) => e.stopPropagation()}
+              className={tkx('relative z-10 max-w-full max-h-full')}
+              style={{
+                objectFit: 'contain',
+                borderRadius: '8px',
+                boxShadow: '0 25px 60px rgba(0,0,0,0.5)',
+              }}
+            />
+            <button
+              aria-label="Close preview"
+              onClick={closeLightbox}
+              className={tkx(
+                'absolute top-4 right-4 z-10 flex items-center justify-center',
+                'bg-transparent border-none cursor-pointer rounded-full p-2',
+              )}
+              style={{ color: '#fff', backgroundColor: 'rgba(255,255,255,0.15)' }}
+            >
+              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} aria-hidden="true">
+                <line x1="18" y1="6" x2="6" y2="18" />
+                <line x1="6" y1="6" x2="18" y2="18" />
+              </svg>
+            </button>
+          </div>,
+          document.body,
+        )
+      : null;
+
+  return (
+    <>
+      {wrapped}
+      {lightbox}
+    </>
+  );
+}

package/src/components/TkxInput.tsx

@@ -0,0 +1,101 @@
+import { forwardRef, useId, type InputHTMLAttributes, type ReactNode } from 'react';
+import { useTheme } from '../themes';
+import { sanitizeString } from '../engine/security';
+import { tkx, cx } from '../engine/tkx';
+
+export interface TkxInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'id'> {
+  label: string;
+  id?: string;
+  error?: string;
+  hint?: string;
+  leftAddon?: ReactNode;
+  rightAddon?: ReactNode;
+  isInvalid?: boolean;
+  isRequired?: boolean;
+}
+
+export const TkxInput = forwardRef<HTMLInputElement, TkxInputProps>(
+  ({ label, id: idProp, error, hint, leftAddon, rightAddon, isInvalid, isRequired, disabled, className, style, ...rest }, ref) => {
+    const theme = useTheme();
+    const autoId = useId();
+    const id = idProp ?? autoId;
+    const hintId = `${id}-hint`;
+    const errorId = `${id}-error`;
+    const hasError = isInvalid || !!error;
+    const describedBy = [hint && hintId, hasError && errorId].filter(Boolean).join(' ') || undefined;
+
+    const safeLabel = sanitizeString(label);
+    const safeError = error ? sanitizeString(error) : undefined;
+    const safeHint = hint ? sanitizeString(hint) : undefined;
+
+    const borderColor = hasError ? theme.danger : theme.border;
+
+    return (
+      <div className={cx(tkx('flex flex-col gap-1 w-full'), className)} style={style}>
+        <label
+          htmlFor={id}
+          className={tkx('text-sm font-medium font-sans')}
+          style={{ color: theme.text }}
+        >
+          {safeLabel}
+          {isRequired && <span aria-hidden="true" className={tkx('ml-1')} style={{ color: theme.danger }}>*</span>}
+        </label>
+
+        <div
+          className={tkx(
+            'flex items-center rounded-lg overflow-hidden',
+            'transition-colors duration-150',
+            disabled ? 'opacity-60' : '',
+          )}
+          style={{ border: `1.5px solid ${borderColor}`, backgroundColor: theme.surface }}
+        >
+          {leftAddon && (
+            <div
+              className={tkx('px-2.5 self-stretch flex items-center text-sm shrink-0')}
+              style={{ backgroundColor: theme.surfaceAlt, color: theme.textMuted, borderRight: `1px solid ${theme.border}` }}
+            >
+              {leftAddon}
+            </div>
+          )}
+
+          <input
+            ref={ref}
+            id={id}
+            aria-invalid={hasError}
+            aria-required={isRequired}
+            aria-describedby={describedBy}
+            disabled={disabled}
+            className={cx(
+              tkx('flex-1 border-none bg-transparent text-sm font-sans py-2.5 px-3 outline-none min-w-0 focus-visible:focus-ring'),
+            )}
+            style={{ color: theme.text }}
+            {...rest}
+          />
+
+          {rightAddon && (
+            <div
+              className={tkx('px-2.5 self-stretch flex items-center text-sm shrink-0')}
+              style={{ backgroundColor: theme.surfaceAlt, color: theme.textMuted, borderLeft: `1px solid ${theme.border}` }}
+            >
+              {rightAddon}
+            </div>
+          )}
+        </div>
+
+        {safeHint && !safeError && (
+          <span id={hintId} className={tkx('text-xs')} style={{ color: theme.textMuted }}>{safeHint}</span>
+        )}
+        {safeError && (
+          <span id={errorId} role="alert" className={tkx('text-xs flex items-center gap-1')} style={{ color: theme.danger }}>
+            <svg width="12" height="12" 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>
+            {safeError}
+          </span>
+        )}
+      </div>
+    );
+  },
+);
+
+TkxInput.displayName = 'TkxInput';

package/src/components/TkxLogo.tsx

@@ -0,0 +1,297 @@
+import { type ReactNode, type CSSProperties } from 'react';
+import { useTheme } from '../themes';
+import { useReducedMotion } from '../hooks';
+import { cx } from '../engine/tkx';
+
+// ── Props ──────────────────────────────────────────────────────────────────────
+
+export type LogoVariant = 'full' | 'icon-only' | 'text-only';
+export type LogoSize = 'sm' | 'md' | 'lg' | 'xl';
+export type LogoOrientation = 'horizontal' | 'stacked';
+
+export interface TkxLogoProps {
+  text?: string;
+  tagline?: string;
+  variant?: LogoVariant;
+  size?: LogoSize;
+  orientation?: LogoOrientation;
+  mark?: ReactNode;
+  color?: string;
+  className?: string;
+  style?: CSSProperties;
+  onClick?: () => void;
+}
+
+// ── Size config ────────────────────────────────────────────────────────────────
+
+const SIZE_CONFIG: Record<LogoSize, {
+  markSize: number;
+  fontSize: number;
+  taglineSize: number;
+  gap: number;
+  letterSpacing: string;
+}> = {
+  sm: { markSize: 24, fontSize: 14, taglineSize: 10, gap: 6, letterSpacing: '-0.01em' },
+  md: { markSize: 32, fontSize: 18, taglineSize: 11, gap: 8, letterSpacing: '-0.02em' },
+  lg: { markSize: 44, fontSize: 26, taglineSize: 13, gap: 12, letterSpacing: '-0.03em' },
+  xl: { markSize: 60, fontSize: 36, taglineSize: 15, gap: 16, letterSpacing: '-0.04em' },
+};
+
+// ── Default SVG Mark ───────────────────────────────────────────────────────────
+// Hexagonal quantum mark with a lightning bolt inside.
+
+interface DefaultMarkProps {
+  size: number;
+  primaryColor: string;
+  reducedMotion: boolean;
+}
+
+function DefaultMark({ size, primaryColor, reducedMotion }: DefaultMarkProps) {
+  const id = 'tkx-logo-gradient';
+  const glowId = 'tkx-logo-glow';
+
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 48 48"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+      style={{
+        filter: !reducedMotion ? `drop-shadow(0 0 ${size * 0.15}px ${primaryColor}60)` : undefined,
+        flexShrink: 0,
+      }}
+    >
+      <defs>
+        <linearGradient id={id} x1="0%" y1="0%" x2="100%" y2="100%">
+          <stop offset="0%" stopColor={primaryColor} stopOpacity="1" />
+          <stop offset="100%" stopColor={primaryColor} stopOpacity="0.6" />
+        </linearGradient>
+        <filter id={glowId} x="-20%" y="-20%" width="140%" height="140%">
+          <feGaussianBlur stdDeviation="1.5" result="blur" />
+          <feMerge>
+            <feMergeNode in="blur" />
+            <feMergeNode in="SourceGraphic" />
+          </feMerge>
+        </filter>
+      </defs>
+
+      {/* Outer hexagon */}
+      <polygon
+        points="24,3 42,13.5 42,34.5 24,45 6,34.5 6,13.5"
+        stroke={primaryColor}
+        strokeWidth="2"
+        fill={`${primaryColor}12`}
+        strokeLinejoin="round"
+      />
+
+      {/* Inner hexagon (rotated) */}
+      <polygon
+        points="24,9 37,16.5 37,31.5 24,39 11,31.5 11,16.5"
+        stroke={primaryColor}
+        strokeWidth="1"
+        strokeOpacity="0.3"
+        fill="none"
+        strokeLinejoin="round"
+      />
+
+      {/* Lightning bolt */}
+      <path
+        d="M27 10 L18 26 L24 26 L21 38 L30 22 L24 22 Z"
+        fill={`url(#${id})`}
+        stroke={primaryColor}
+        strokeWidth="0.5"
+        strokeLinejoin="round"
+        filter={`url(#${glowId})`}
+      />
+
+      {/* Corner accents */}
+      <circle cx="24" cy="3" r="1.5" fill={primaryColor} opacity="0.7" />
+      <circle cx="42" cy="13.5" r="1.5" fill={primaryColor} opacity="0.5" />
+      <circle cx="42" cy="34.5" r="1.5" fill={primaryColor} opacity="0.5" />
+      <circle cx="24" cy="45" r="1.5" fill={primaryColor} opacity="0.7" />
+      <circle cx="6" cy="34.5" r="1.5" fill={primaryColor} opacity="0.5" />
+      <circle cx="6" cy="13.5" r="1.5" fill={primaryColor} opacity="0.5" />
+    </svg>
+  );
+}
+
+// ── Glow animation style injection ────────────────────────────────────────────
+
+let glowStyleInjected = false;
+
+function injectGlowStyle() {
+  if (glowStyleInjected || typeof document === 'undefined') return;
+  glowStyleInjected = true;
+  const style = document.createElement('style');
+  style.id = 'tkx-logo-glow-anim';
+  style.textContent = `
+    @media (prefers-reduced-motion: no-preference) {
+      .tkx-logo-glow {
+        animation: tkx-logo-pulse 3s ease-in-out infinite;
+      }
+      @keyframes tkx-logo-pulse {
+        0%, 100% { opacity: 1; }
+        50% { opacity: 0.75; }
+      }
+    }
+  `;
+  document.head.appendChild(style);
+}
+
+// ── TkxLogo Component ──────────────────────────────────────────────────────────
+
+export function TkxLogo({
+  text = 'TekiVex',
+  tagline,
+  variant = 'full',
+  size = 'md',
+  orientation = 'horizontal',
+  mark,
+  color,
+  className,
+  style,
+  onClick,
+}: TkxLogoProps) {
+  const theme = useTheme();
+  const reducedMotion = useReducedMotion();
+  const primaryColor = color ?? theme.primary;
+  const config = SIZE_CONFIG[size];
+
+  // Inject glow animation on first render
+  injectGlowStyle();
+
+  const showMark = variant !== 'text-only';
+  const showText = variant !== 'icon-only';
+
+  const isStacked = orientation === 'stacked';
+  const isClickable = typeof onClick === 'function';
+
+  const containerStyle: CSSProperties = {
+    display: 'inline-flex',
+    flexDirection: isStacked ? 'column' : 'row',
+    alignItems: isStacked ? 'center' : 'center',
+    gap: config.gap,
+    cursor: isClickable ? 'pointer' : 'default',
+    userSelect: 'none',
+    textDecoration: 'none',
+    ...style,
+  };
+
+  const textGroupStyle: CSSProperties = {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: isStacked ? 'center' : 'flex-start',
+    gap: 2,
+  };
+
+  const brandTextStyle: CSSProperties = {
+    fontSize: config.fontSize,
+    fontWeight: 800,
+    letterSpacing: config.letterSpacing,
+    lineHeight: 1,
+    color: theme.text,
+    fontFamily: 'inherit',
+    margin: 0,
+    padding: 0,
+  };
+
+  const taglineStyle: CSSProperties = {
+    fontSize: config.taglineSize,
+    fontWeight: 500,
+    color: theme.textMuted,
+    letterSpacing: '0.04em',
+    lineHeight: 1,
+    margin: 0,
+    padding: 0,
+  };
+
+  // Brand name: "Teki" in theme text color, "Vex" in primary color
+  const brandParts = splitBrand(text, primaryColor, theme.text);
+
+  const ariaLabel = tagline
+    ? `${text} — ${tagline}`
+    : text;
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (isClickable && (e.key === 'Enter' || e.key === ' ')) {
+      e.preventDefault();
+      onClick?.();
+    }
+  };
+
+  return (
+    <div
+      className={cx('tkx-logo-glow', className ?? '')}
+      style={containerStyle}
+      role="img"
+      aria-label={ariaLabel}
+      onClick={isClickable ? onClick : undefined}
+      onKeyDown={isClickable ? handleKeyDown : undefined}
+      tabIndex={isClickable ? 0 : undefined}
+    >
+      {showMark && (
+        mark ?? (
+          <DefaultMark
+            size={config.markSize}
+            primaryColor={primaryColor}
+            reducedMotion={reducedMotion}
+          />
+        )
+      )}
+
+      {showText && (
+        <div style={textGroupStyle}>
+          <span style={brandTextStyle} aria-hidden="true">
+            {brandParts}
+          </span>
+          {tagline && (
+            <span style={taglineStyle} aria-hidden="true">
+              {tagline}
+            </span>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+TkxLogo.displayName = 'TkxLogo';
+
+// ── Helpers ────────────────────────────────────────────────────────────────────
+
+/**
+ * Splits the brand text so the last 3 characters are colored with the primary color.
+ * For "TekiVex" → "Teki" (text color) + "Vex" (primary color).
+ * Falls back to splitting at the midpoint for short names.
+ */
+function splitBrand(
+  text: string,
+  primaryColor: string,
+  textColor: string,
+): ReactNode {
+  if (text.length <= 3) {
+    return <span style={{ color: primaryColor }}>{text}</span>;
+  }
+
+  // Try to find a natural camelCase split point
+  const camelMatch = text.match(/^([A-Za-z]+?)([A-Z][a-z]*)$/);
+  if (camelMatch) {
+    return (
+      <>
+        <span style={{ color: textColor }}>{camelMatch[1]}</span>
+        <span style={{ color: primaryColor }}>{camelMatch[2]}</span>
+      </>
+    );
+  }
+
+  // Default: last 3 chars get primary color
+  const split = text.length - 3;
+  return (
+    <>
+      <span style={{ color: textColor }}>{text.slice(0, split)}</span>
+      <span style={{ color: primaryColor }}>{text.slice(split)}</span>
+    </>
+  );
+}