tekivex-ui 2.0.0

package/src/components/TkxAvatar.tsx

@@ -0,0 +1,101 @@
+import { forwardRef, useState, type ImgHTMLAttributes } from 'react';
+import { useTheme } from '../themes';
+import { getAccessibleForeground } from '../engine/wcag';
+import { sanitizeString } from '../engine/security';
+import { tkx, cx } from '../engine/tkx';
+
+export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type AvatarShape = 'circle' | 'square';
+export type AvatarStatus = 'online' | 'offline' | 'away' | 'busy';
+
+export interface TkxAvatarProps extends Omit<ImgHTMLAttributes<HTMLImageElement>, 'src' | 'alt'> {
+  src?: string;
+  alt: string;
+  initials?: string;
+  size?: AvatarSize;
+  shape?: AvatarShape;
+  status?: AvatarStatus;
+}
+
+const SIZE_PX: Record<AvatarSize, number> = { xs: 24, sm: 32, md: 40, lg: 56, xl: 72 };
+const STATUS_COLORS: Record<AvatarStatus, string> = {
+  online: '#06d6a0', offline: '#8888aa', away: '#ffbe0b', busy: '#f72585',
+};
+
+export const TkxAvatar = forwardRef<HTMLDivElement, TkxAvatarProps>(
+  ({ src, alt, initials, size = 'md', shape = 'circle', status, className, style, ...rest }, ref) => {
+    const theme = useTheme();
+    const [imageError, setImageError] = useState(false);
+    const px = SIZE_PX[size];
+    const isCircle = shape === 'circle';
+    const bgColor = theme.surfaceAlt;
+    const textColor = getAccessibleForeground(bgColor, [theme.text, theme.textMuted]);
+    const showImage = src && !imageError;
+    const showInitials = !showImage && initials;
+    const statusDotSize = Math.max(8, px * 0.22);
+
+    const containerClass = tkx(
+      'relative inline-flex shrink-0',
+      isCircle ? 'rounded-full' : 'rounded-lg',
+    );
+
+    const mediaClass = tkx(
+      'block object-cover',
+      isCircle ? 'rounded-full' : 'rounded-lg',
+    );
+
+    const fallbackClass = tkx(
+      'flex items-center justify-center font-semibold font-sans select-none',
+      isCircle ? 'rounded-full' : 'rounded-lg',
+    );
+
+    return (
+      <div
+        ref={ref}
+        className={cx(containerClass, className)}
+        style={{ width: px, height: px, ...style }}
+        {...(rest as React.HTMLAttributes<HTMLDivElement>)}
+      >
+        {showImage ? (
+          <img
+            src={sanitizeString(src!)}
+            alt={sanitizeString(alt)}
+            onError={() => setImageError(true)}
+            className={mediaClass}
+            style={{ width: px, height: px }}
+          />
+        ) : (
+          <div
+            role="img"
+            aria-label={sanitizeString(alt)}
+            className={fallbackClass}
+            style={{ width: px, height: px, backgroundColor: bgColor, color: textColor, fontSize: px * 0.38 }}
+          >
+            {showInitials ? (
+              sanitizeString(initials!).slice(0, 2).toUpperCase()
+            ) : (
+              <svg width={px * 0.5} height={px * 0.5} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} aria-hidden="true">
+                <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
+                <circle cx="12" cy="7" r="4" />
+              </svg>
+            )}
+          </div>
+        )}
+
+        {status && (
+          <span
+            aria-label={`Status: ${status}`}
+            className={tkx('absolute bottom-0 right-0 rounded-full')}
+            style={{
+              width: statusDotSize, height: statusDotSize,
+              backgroundColor: STATUS_COLORS[status],
+              border: `2px solid ${theme.bg}`,
+            }}
+          />
+        )}
+      </div>
+    );
+  },
+);
+
+TkxAvatar.displayName = 'TkxAvatar';

package/src/components/TkxBadge.tsx

@@ -0,0 +1,73 @@
+import { forwardRef, type HTMLAttributes } from 'react';
+import { useTheme } from '../themes';
+import { getAccessibleForeground } from '../engine/wcag';
+import { sanitizeString } from '../engine/security';
+import { tkx, cx } from '../engine/tkx';
+
+export type BadgeVariant = 'default' | 'primary' | 'secondary' | 'danger' | 'warning' | 'success' | 'info';
+export type BadgeSize = 'sm' | 'md' | 'lg';
+
+export interface TkxBadgeProps extends HTMLAttributes<HTMLSpanElement> {
+  variant?: BadgeVariant;
+  size?: BadgeSize;
+  dot?: boolean;
+  pulse?: boolean;
+  outlined?: boolean;
+}
+
+const SIZE_CLASS: Record<BadgeSize, string> = {
+  sm: 'text-xs px-1.5 py-[2px] min-h-[16px]',
+  md: 'text-xs px-2 py-[3px] min-h-[20px]',
+  lg: 'text-sm px-3 py-1 min-h-[24px]',
+};
+
+const DOT_SIZE: Record<BadgeSize, string> = { sm: 'size-[6px]', md: 'size-2', lg: 'size-2.5' };
+
+export const TkxBadge = forwardRef<HTMLSpanElement, TkxBadgeProps>(
+  ({ variant = 'default', size = 'md', dot = false, pulse = false, outlined = false, children, className, style, ...rest }, ref) => {
+    const theme = useTheme();
+
+    const colorMap: Record<BadgeVariant, string> = {
+      default: theme.border, primary: theme.primary, secondary: theme.secondary,
+      danger: theme.danger, warning: theme.warning, success: theme.success, info: theme.info,
+    };
+    const bgColor = colorMap[variant];
+    const textColor = getAccessibleForeground(bgColor, ['#ffffff', '#000000', theme.bg]);
+
+    const safeChildren = typeof children === 'string' ? sanitizeString(children) : children;
+
+    if (dot) {
+      return (
+        <span
+          ref={ref}
+          aria-label={typeof children === 'string' ? sanitizeString(children) : undefined}
+          className={cx(tkx('inline-block rounded-full', DOT_SIZE[size], pulse && 'animate-pulse'), className)}
+          style={{ backgroundColor: bgColor, ...style }}
+          {...rest}
+        />
+      );
+    }
+
+    return (
+      <span
+        ref={ref}
+        className={cx(tkx(
+          'inline-flex items-center justify-center rounded-full font-semibold font-sans tracking-wide',
+          SIZE_CLASS[size],
+          pulse && 'animate-pulse',
+        ), className)}
+        style={{
+          backgroundColor: outlined ? 'transparent' : bgColor,
+          color: outlined ? bgColor : textColor,
+          border: outlined ? `1px solid ${bgColor}` : 'none',
+          ...style,
+        }}
+        {...rest}
+      >
+        {safeChildren}
+      </span>
+    );
+  },
+);
+
+TkxBadge.displayName = 'TkxBadge';

package/src/components/TkxButton.tsx

@@ -0,0 +1,153 @@
+import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from 'react';
+import { useTheme } from '../themes';
+import { getAccessibleForeground } from '../engine/wcag';
+import { sanitizeString } from '../engine/security';
+import { useReducedMotion } from '../hooks';
+import { tkx, cx } from '../engine/tkx';
+
+export type ButtonVariant = 'solid' | 'outline' | 'ghost' | 'link';
+export type ButtonSize = 'sm' | 'md' | 'lg' | 'xl';
+export type ButtonColorScheme = 'primary' | 'secondary' | 'danger' | 'warning' | 'success';
+
+export interface TkxButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  colorScheme?: ButtonColorScheme;
+  isLoading?: boolean;
+  loadingText?: string;
+  leftIcon?: ReactNode;
+  rightIcon?: ReactNode;
+  isFullWidth?: boolean;
+  glow?: boolean;
+}
+
+const SIZE_CLASS: Record<ButtonSize, string> = {
+  sm: 'text-xs font-semibold',
+  md: 'text-sm font-semibold',
+  lg: 'text-base font-semibold',
+  xl: 'text-lg font-semibold',
+};
+
+const SIZE_PADDING: Record<ButtonSize, string> = {
+  sm: 'py-1.5 px-3',
+  md: 'py-2 px-4',
+  lg: 'py-2.5 px-5',
+  xl: 'py-3 px-6',
+};
+
+const SIZE_MIN_H: Record<ButtonSize, string> = {
+  sm: 'min-h-[32px]',
+  md: 'min-h-[40px]',
+  lg: 'min-h-[48px]',
+  xl: 'min-h-[56px]',
+};
+
+const SPINNER_SIZE: Record<ButtonSize, number> = { sm: 14, md: 16, lg: 18, xl: 20 };
+
+function Spinner({ size }: { size: ButtonSize }) {
+  const dim = SPINNER_SIZE[size];
+  return (
+    <svg
+      width={dim}
+      height={dim}
+      viewBox="0 0 24 24"
+      fill="none"
+      aria-hidden="true"
+      className={tkx('animate-spin shrink-0')}
+    >
+      <circle cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="3" strokeOpacity="0.25" />
+      <path d="M12 2a10 10 0 0 1 10 10" stroke="currentColor" strokeWidth="3" strokeLinecap="round" />
+    </svg>
+  );
+}
+
+export const TkxButton = forwardRef<HTMLButtonElement, TkxButtonProps>(
+  (
+    {
+      variant = 'solid',
+      size = 'md',
+      colorScheme = 'primary',
+      isLoading = false,
+      loadingText,
+      leftIcon,
+      rightIcon,
+      isFullWidth = false,
+      glow = false,
+      disabled,
+      children,
+      className,
+      style,
+      ...rest
+    },
+    ref,
+  ) => {
+    const theme = useTheme();
+    const reducedMotion = useReducedMotion();
+    const isDisabled = disabled || isLoading;
+
+    const colorMap: Record<ButtonColorScheme, string> = {
+      primary: theme.primary, secondary: theme.secondary,
+      danger: theme.danger, warning: theme.warning, success: theme.success,
+    };
+    const accentColor = colorMap[colorScheme];
+    const textOnAccent = getAccessibleForeground(accentColor, ['#ffffff', '#000000', theme.bg]);
+
+    const safeChildren = typeof children === 'string' ? sanitizeString(children) : children;
+    const safeLoadingText = loadingText ? sanitizeString(loadingText) : undefined;
+
+    // Variant-specific inline styles (dynamic hex colors from theme)
+    const variantStyle: React.CSSProperties = variant === 'solid'
+      ? {
+          backgroundColor: accentColor,
+          color: textOnAccent,
+          border: 'none',
+          boxShadow: glow && !reducedMotion ? `0 0 20px ${accentColor}55` : undefined,
+        }
+      : variant === 'outline'
+        ? { backgroundColor: 'transparent', color: accentColor, border: `2px solid ${accentColor}` }
+        : variant === 'ghost'
+          ? { backgroundColor: 'transparent', color: accentColor, border: 'none' }
+          : { backgroundColor: 'transparent', color: accentColor, border: 'none', textDecoration: 'underline' };
+
+    const base = tkx(
+      'inline-flex items-center justify-center gap-2',
+      'rounded-lg font-sans font-semibold',
+      'select-none relative overflow-hidden',
+      SIZE_CLASS[size],
+      SIZE_PADDING[size],
+      SIZE_MIN_H[size],
+      variant !== 'link' && SIZE_MIN_H[size],
+      isFullWidth && 'w-full',
+      isDisabled ? 'cursor-not-allowed opacity-60' : 'cursor-pointer',
+      !reducedMotion && 'transition-all duration-200',
+      'focus-visible:focus-ring',
+    );
+
+    return (
+      <button
+        ref={ref}
+        aria-busy={isLoading}
+        aria-disabled={isDisabled}
+        disabled={isDisabled}
+        className={cx(base, className)}
+        style={{ ...variantStyle, ...style }}
+        {...rest}
+      >
+        {isLoading ? (
+          <>
+            <Spinner size={size} />
+            {safeLoadingText ?? safeChildren}
+          </>
+        ) : (
+          <>
+            {leftIcon && <span aria-hidden="true">{leftIcon}</span>}
+            {safeChildren}
+            {rightIcon && <span aria-hidden="true">{rightIcon}</span>}
+          </>
+        )}
+      </button>
+    );
+  },
+);
+
+TkxButton.displayName = 'TkxButton';

package/src/components/TkxCard.tsx

@@ -0,0 +1,92 @@
+import { forwardRef, type HTMLAttributes, type ReactNode } from 'react';
+import { useTheme } from '../themes';
+import { tkx, cx } from '../engine/tkx';
+
+export type CardVariant = 'default' | 'glass' | 'quantum' | 'elevated' | 'outlined';
+export type CardPadding = 'none' | 'sm' | 'md' | 'lg';
+
+export interface TkxCardProps extends HTMLAttributes<HTMLElement> {
+  variant?: CardVariant;
+  isHoverable?: boolean;
+  isClickable?: boolean;
+  padding?: CardPadding;
+  as?: 'div' | 'article' | 'section' | 'button';
+}
+
+const PADDING_CLASS: Record<CardPadding, string> = {
+  none: '', sm: 'p-3', md: 'p-5', lg: 'p-7',
+};
+
+export const TkxCard = forwardRef<HTMLElement, TkxCardProps>(
+  ({ variant = 'default', isHoverable, isClickable, padding = 'md', as, children, className, style, ...rest }, ref) => {
+    const theme = useTheme();
+    const Tag = (as ?? (isClickable ? 'button' : 'div')) as 'div';
+
+    const variantStyle: React.CSSProperties = {
+      default: { backgroundColor: theme.surface, border: `1px solid ${theme.border}` },
+      glass: { backgroundColor: `${theme.surface}cc`, backdropFilter: 'blur(12px)', border: `1px solid ${theme.border}55`, boxShadow: `0 4px 24px ${theme.bg}40` },
+      quantum: { backgroundColor: theme.surfaceAlt, border: `1px solid ${theme.primary}33`, boxShadow: `0 0 24px ${theme.primary}18` },
+      elevated: { backgroundColor: theme.surface, boxShadow: `0 4px 20px ${theme.bg}60` },
+      outlined: { backgroundColor: 'transparent', border: `2px solid ${theme.border}` },
+    }[variant];
+
+    const base = tkx(
+      'rounded-xl w-full text-left block font-sans focus-visible:focus-ring',
+      PADDING_CLASS[padding],
+      (isHoverable || isClickable) && 'transition-transform duration-150 hover:scale-[1.01]',
+      isClickable ? 'cursor-pointer' : 'cursor-default',
+    );
+
+    return (
+      <Tag
+        ref={ref as React.Ref<HTMLDivElement>}
+        className={cx('tkx-card', base, className)}
+        style={{ color: theme.text, ...variantStyle, ...style }}
+        {...(rest as HTMLAttributes<HTMLDivElement>)}
+      >
+        {children}
+      </Tag>
+    );
+  },
+);
+
+TkxCard.displayName = 'TkxCard';
+
+// ── Sub-components ────────────────────────────────────────────────────────────
+
+export interface TkxCardHeaderProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+  title?: ReactNode;
+  subtitle?: ReactNode;
+  action?: ReactNode;
+}
+
+export function TkxCardHeader({ title, subtitle, action, children, className, ...rest }: TkxCardHeaderProps) {
+  const theme = useTheme();
+  return (
+    <div className={cx(tkx('flex justify-between items-start mb-4'), className)} {...rest}>
+      <div className={tkx('flex-1 min-w-0')}>
+        {title && <h3 className={tkx('text-base font-semibold m-0')} style={{ color: theme.text }}>{title}</h3>}
+        {subtitle && <p className={tkx('text-sm mt-1 mb-0')} style={{ color: theme.textMuted }}>{subtitle}</p>}
+        {children}
+      </div>
+      {action && <div className={tkx('ml-3 shrink-0')}>{action}</div>}
+    </div>
+  );
+}
+
+export function TkxCardBody({ children, className, ...rest }: HTMLAttributes<HTMLDivElement>) {
+  return <div className={cx(tkx(''), className)} {...rest}>{children}</div>;
+}
+
+export function TkxCardFooter({ children, className, style, ...rest }: HTMLAttributes<HTMLDivElement>) {
+  const theme = useTheme();
+  return (
+    <div
+      className={cx(tkx('flex items-center justify-end gap-2 mt-4 pt-4'), className)}
+      style={{ borderTop: `1px solid ${theme.border}`, ...style }}
+      {...rest}
+    >
+      {children}
+    </div>
+  );
+}