tekivex-ui 2.0.0

package/src/components/TkxAccordion.tsx

@@ -0,0 +1,588 @@
+import {
+  useState,
+  useRef,
+  useEffect,
+  useId,
+  useCallback,
+  type ReactNode,
+  type CSSProperties,
+} from 'react';
+import { useTheme } from '../themes';
+import { useReducedMotion } from '../hooks';
+import { tkx } from '../engine/tkx';
+
+// ── Types ─────────────────────────────────────────────────────────────────────
+
+export type AccordionVariant = 'default' | 'bordered' | 'separated' | 'ghost' | 'flush';
+export type AccordionSize = 'sm' | 'md' | 'lg';
+
+export interface AccordionItem {
+  id: string;
+  title: ReactNode;
+  content: ReactNode;
+  icon?: ReactNode;
+  badge?: ReactNode;
+  subtitle?: string;
+  disabled?: boolean;
+  className?: string;
+}
+
+export interface TkxAccordionProps {
+  items: AccordionItem[];
+  multiple?: boolean;
+  defaultOpen?: string | string[];
+  value?: string | string[];
+  onChange?: (value: string | string[]) => void;
+  variant?: AccordionVariant;
+  size?: AccordionSize;
+  iconPosition?: 'left' | 'right';
+  iconStyle?: 'chevron' | 'plus' | 'arrow';
+  flush?: boolean;
+  className?: string;
+  style?: CSSProperties;
+}
+
+// ── Size config ───────────────────────────────────────────────────────────────
+
+const SIZE_CONFIG: Record<AccordionSize, {
+  triggerPadding: string;
+  contentPadding: string;
+  fontSize: string;
+  subtitleSize: string;
+  iconSize: number;
+}> = {
+  sm: {
+    triggerPadding: '10px 12px',
+    contentPadding: '0 12px 10px 12px',
+    fontSize: '13px',
+    subtitleSize: '11px',
+    iconSize: 14,
+  },
+  md: {
+    triggerPadding: '14px 16px',
+    contentPadding: '0 16px 14px 16px',
+    fontSize: '14px',
+    subtitleSize: '12px',
+    iconSize: 16,
+  },
+  lg: {
+    triggerPadding: '18px 20px',
+    contentPadding: '0 20px 18px 20px',
+    fontSize: '16px',
+    subtitleSize: '13px',
+    iconSize: 18,
+  },
+};
+
+// ── Icon Components ───────────────────────────────────────────────────────────
+
+interface AccordionIconProps {
+  open: boolean;
+  reduced: boolean;
+  iconStyle: 'chevron' | 'plus' | 'arrow';
+  size: number;
+  color: string;
+}
+
+function AccordionIcon({ open, reduced, iconStyle, size, color }: AccordionIconProps) {
+  const transition = reduced ? 'none' : 'transform 240ms cubic-bezier(0.4, 0, 0.2, 1)';
+
+  if (iconStyle === 'chevron') {
+    return (
+      <svg
+        width={size}
+        height={size}
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke={color}
+        strokeWidth={2.5}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        aria-hidden="true"
+        style={{
+          transform: open ? 'rotate(180deg)' : 'rotate(0deg)',
+          transition,
+          flexShrink: 0,
+        }}
+      >
+        <polyline points="6 9 12 15 18 9" />
+      </svg>
+    );
+  }
+
+  if (iconStyle === 'plus') {
+    return (
+      <svg
+        width={size}
+        height={size}
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke={color}
+        strokeWidth={2.5}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        aria-hidden="true"
+        style={{
+          transform: open ? 'rotate(45deg)' : 'rotate(0deg)',
+          transition,
+          flexShrink: 0,
+        }}
+      >
+        <line x1="12" y1="5" x2="12" y2="19" />
+        <line x1="5" y1="12" x2="19" y2="12" />
+      </svg>
+    );
+  }
+
+  // arrow style: → rotates to ↓
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke={color}
+      strokeWidth={2.5}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+      style={{
+        transform: open ? 'rotate(90deg)' : 'rotate(0deg)',
+        transition,
+        flexShrink: 0,
+      }}
+    >
+      <line x1="5" y1="12" x2="19" y2="12" />
+      <polyline points="12 5 19 12 12 19" />
+    </svg>
+  );
+}
+
+// ── Animated Panel ────────────────────────────────────────────────────────────
+
+interface AnimatedPanelProps {
+  isOpen: boolean;
+  reduced: boolean;
+  children: ReactNode;
+  id: string;
+  triggerId: string;
+}
+
+function AnimatedPanel({ isOpen, reduced, children, id, triggerId }: AnimatedPanelProps) {
+  const outerRef = useRef<HTMLDivElement>(null);
+  const innerRef = useRef<HTMLDivElement>(null);
+  const prevOpenRef = useRef(isOpen);
+  const isAnimatingRef = useRef(false);
+
+  // Initial render — set immediately without animation
+  useEffect(() => {
+    const el = outerRef.current;
+    if (!el) return;
+    if (isOpen) {
+      el.style.height = 'auto';
+      el.style.overflow = 'visible';
+    } else {
+      el.style.height = '0px';
+      el.style.overflow = 'hidden';
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  useEffect(() => {
+    if (prevOpenRef.current === isOpen) return;
+    prevOpenRef.current = isOpen;
+
+    const el = outerRef.current;
+    const inner = innerRef.current;
+    if (!el || !inner) return;
+
+    if (reduced) {
+      el.style.height = isOpen ? 'auto' : '0px';
+      el.style.overflow = isOpen ? 'visible' : 'hidden';
+      return;
+    }
+
+    if (isAnimatingRef.current) {
+      // Cancel mid-animation: snapshot current rendered height
+      const currentHeight = el.getBoundingClientRect().height;
+      el.style.transition = 'none';
+      el.style.height = `${currentHeight}px`;
+      // Force reflow
+      void el.offsetHeight;
+    }
+
+    isAnimatingRef.current = true;
+    el.style.overflow = 'hidden';
+
+    if (isOpen) {
+      // Animate 0 → scrollHeight
+      el.style.height = '0px';
+      el.style.transition = 'height 280ms cubic-bezier(0.4, 0, 0.2, 1)';
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          el.style.height = `${inner.scrollHeight}px`;
+        });
+      });
+    } else {
+      // Animate scrollHeight → 0
+      el.style.height = `${inner.scrollHeight}px`;
+      el.style.transition = 'height 280ms cubic-bezier(0.4, 0, 0.2, 1)';
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          el.style.height = '0px';
+        });
+      });
+    }
+  }, [isOpen, reduced]);
+
+  const handleTransitionEnd = (e: React.TransitionEvent<HTMLDivElement>) => {
+    if (e.propertyName !== 'height') return;
+    isAnimatingRef.current = false;
+    const el = outerRef.current;
+    if (!el) return;
+    if (isOpen) {
+      el.style.height = 'auto';
+      el.style.overflow = 'visible';
+    } else {
+      el.style.overflow = 'hidden';
+    }
+  };
+
+  return (
+    <div
+      ref={outerRef}
+      id={id}
+      role="region"
+      aria-labelledby={triggerId}
+      onTransitionEnd={handleTransitionEnd}
+      style={{ willChange: 'height' }}
+    >
+      <div ref={innerRef}>
+        {children}
+      </div>
+    </div>
+  );
+}
+
+// ── Main Component ────────────────────────────────────────────────────────────
+
+export function TkxAccordion({
+  items,
+  multiple = false,
+  defaultOpen,
+  value: valueProp,
+  onChange,
+  variant = 'default',
+  size = 'md',
+  iconPosition = 'right',
+  iconStyle = 'chevron',
+  flush = false,
+  className,
+  style,
+}: TkxAccordionProps) {
+  const theme = useTheme();
+  const reduced = useReducedMotion();
+  const baseId = useId();
+
+  // Controlled vs uncontrolled
+  const isControlled = valueProp !== undefined;
+
+  const normalizeInitial = (v: string | string[] | undefined): Set<string> => {
+    if (!v) return new Set();
+    if (Array.isArray(v)) return new Set(v);
+    return new Set([v]);
+  };
+
+  const [internalOpen, setInternalOpen] = useState<Set<string>>(() =>
+    normalizeInitial(defaultOpen)
+  );
+
+  const openIds: Set<string> = isControlled
+    ? normalizeInitial(valueProp)
+    : internalOpen;
+
+  const toggle = useCallback(
+    (id: string, disabled?: boolean) => {
+      if (disabled) return;
+
+      let next: Set<string>;
+      if (isControlled) {
+        const current = normalizeInitial(valueProp);
+        next = new Set(current);
+        if (next.has(id)) {
+          next.delete(id);
+        } else {
+          if (!multiple) next.clear();
+          next.add(id);
+        }
+      } else {
+        setInternalOpen((prev) => {
+          next = new Set(prev);
+          if (next.has(id)) {
+            next.delete(id);
+          } else {
+            if (!multiple) next.clear();
+            next.add(id);
+          }
+          const arr = [...next];
+          onChange?.(multiple ? arr : arr[0] ?? '');
+          return next;
+        });
+        return;
+      }
+
+      const arr = [...next];
+      onChange?.(multiple ? arr : arr[0] ?? '');
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [multiple, onChange, isControlled, valueProp]
+  );
+
+  const sz = SIZE_CONFIG[size];
+
+  // Variant-specific wrapper styles
+  const getWrapperStyle = (): CSSProperties => {
+    if (flush) return {};
+    switch (variant) {
+      case 'bordered':
+        return {
+          border: `1px solid ${theme.border}`,
+          borderRadius: '10px',
+          overflow: 'hidden',
+        };
+      case 'separated':
+        return {};
+      case 'ghost':
+      case 'flush':
+        return {};
+      default: // 'default'
+        return {};
+    }
+  };
+
+  // Item wrapper styles
+  const getItemStyle = (idx: number, isOpen: boolean, isLast: boolean): CSSProperties => {
+    if (flush) return {};
+    switch (variant) {
+      case 'default':
+        return {
+          borderBottom: isLast ? 'none' : `1px solid ${theme.border}`,
+        };
+      case 'bordered':
+        return {
+          borderBottom: isLast ? 'none' : `1px solid ${theme.border}`,
+        };
+      case 'separated':
+        return {
+          border: `1px solid ${theme.border}`,
+          borderRadius: '10px',
+          overflow: 'hidden',
+          boxShadow: `0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04)`,
+        };
+      case 'ghost':
+        return {};
+      default:
+        return {};
+    }
+    void idx; void isOpen;
+  };
+
+  // Trigger hover style
+  const getTriggerHoverBg = (isOpen: boolean): string => {
+    if (variant === 'ghost' || variant === 'flush') {
+      return isOpen ? `${theme.primary}10` : `${theme.surfaceAlt}80`;
+    }
+    return isOpen ? `${theme.primary}0d` : `${theme.surfaceAlt}60`;
+  };
+
+  const isSeparatedVariant = variant === 'separated';
+
+  return (
+    <div
+      className={tkx(className ?? '')}
+      style={{
+        ...getWrapperStyle(),
+        display: isSeparatedVariant ? 'flex' : undefined,
+        flexDirection: isSeparatedVariant ? 'column' : undefined,
+        gap: isSeparatedVariant ? '8px' : undefined,
+        ...style,
+      }}
+    >
+      {items.map((item, idx) => {
+        const isOpen = openIds.has(item.id);
+        const isLast = idx === items.length - 1;
+        const triggerId = `${baseId}-trigger-${item.id}`;
+        const panelId = `${baseId}-panel-${item.id}`;
+
+        return (
+          <div
+            key={item.id}
+            className={item.className}
+            style={getItemStyle(idx, isOpen, isLast)}
+          >
+            {/* Trigger button */}
+            <button
+              id={triggerId}
+              type="button"
+              role="button"
+              aria-expanded={isOpen}
+              aria-controls={panelId}
+              disabled={item.disabled}
+              onClick={() => toggle(item.id, item.disabled)}
+              style={{
+                width: '100%',
+                display: 'flex',
+                alignItems: item.subtitle ? 'flex-start' : 'center',
+                gap: '8px',
+                padding: sz.triggerPadding,
+                border: 'none',
+                background: 'transparent',
+                cursor: item.disabled ? 'not-allowed' : 'pointer',
+                textAlign: 'left',
+                fontFamily: 'inherit',
+                fontSize: sz.fontSize,
+                fontWeight: 500,
+                color: item.disabled ? theme.textMuted : theme.text,
+                opacity: item.disabled ? 0.5 : 1,
+                transition: reduced ? 'none' : 'background-color 160ms ease',
+                outline: 'none',
+              }}
+              onMouseEnter={(e) => {
+                if (!item.disabled) {
+                  (e.currentTarget as HTMLButtonElement).style.backgroundColor = getTriggerHoverBg(isOpen);
+                }
+              }}
+              onMouseLeave={(e) => {
+                (e.currentTarget as HTMLButtonElement).style.backgroundColor = isOpen ? `${theme.primary}0d` : 'transparent';
+              }}
+              onFocus={(e) => {
+                if (!item.disabled) {
+                  e.currentTarget.style.outline = `2px solid ${theme.primary}`;
+                  e.currentTarget.style.outlineOffset = '2px';
+                }
+              }}
+              onBlur={(e) => {
+                e.currentTarget.style.outline = 'none';
+              }}
+            >
+              {/* Left icon (item icon) */}
+              {item.icon && (
+                <span
+                  aria-hidden="true"
+                  style={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    flexShrink: 0,
+                    color: theme.primary,
+                    marginTop: item.subtitle ? '1px' : undefined,
+                  }}
+                >
+                  {item.icon}
+                </span>
+              )}
+
+              {/* Left chevron position */}
+              {iconPosition === 'left' && (
+                <span
+                  aria-hidden="true"
+                  style={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    flexShrink: 0,
+                    color: isOpen ? theme.primary : theme.textMuted,
+                    marginTop: item.subtitle ? '1px' : undefined,
+                  }}
+                >
+                  <AccordionIcon
+                    open={isOpen}
+                    reduced={reduced}
+                    iconStyle={iconStyle}
+                    size={sz.iconSize}
+                    color={isOpen ? theme.primary : theme.textMuted}
+                  />
+                </span>
+              )}
+
+              {/* Title + subtitle block */}
+              <span style={{ flex: 1, minWidth: 0 }}>
+                <span style={{ display: 'block', lineHeight: 1.4 }}>{item.title}</span>
+                {item.subtitle && (
+                  <span
+                    style={{
+                      display: 'block',
+                      fontSize: sz.subtitleSize,
+                      color: theme.textMuted,
+                      fontWeight: 400,
+                      marginTop: '2px',
+                      lineHeight: 1.3,
+                    }}
+                  >
+                    {item.subtitle}
+                  </span>
+                )}
+              </span>
+
+              {/* Badge */}
+              {item.badge && (
+                <span
+                  aria-hidden="true"
+                  style={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    flexShrink: 0,
+                  }}
+                >
+                  {item.badge}
+                </span>
+              )}
+
+              {/* Right chevron position (default) */}
+              {iconPosition === 'right' && (
+                <span
+                  aria-hidden="true"
+                  style={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    flexShrink: 0,
+                    color: isOpen ? theme.primary : theme.textMuted,
+                    marginTop: item.subtitle ? '1px' : undefined,
+                  }}
+                >
+                  <AccordionIcon
+                    open={isOpen}
+                    reduced={reduced}
+                    iconStyle={iconStyle}
+                    size={sz.iconSize}
+                    color={isOpen ? theme.primary : theme.textMuted}
+                  />
+                </span>
+              )}
+            </button>
+
+            {/* Animated content panel */}
+            <AnimatedPanel
+              isOpen={isOpen}
+              reduced={reduced}
+              id={panelId}
+              triggerId={triggerId}
+            >
+              <div
+                style={{
+                  padding: sz.contentPadding,
+                  fontSize: sz.fontSize,
+                  lineHeight: 1.6,
+                  color: theme.textMuted,
+                  fontFamily: 'inherit',
+                }}
+              >
+                {item.content}
+              </div>
+            </AnimatedPanel>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+TkxAccordion.displayName = 'TkxAccordion';

package/src/components/TkxAlert.tsx

@@ -0,0 +1,91 @@
+import { type ReactNode, useEffect } from 'react';
+import { useTheme } from '../themes';
+import { sanitizeString } from '../engine/security';
+import { useAnnounce } from '../hooks';
+import { tkx } from '../engine/tkx';
+
+export type AlertVariant = 'info' | 'success' | 'warning' | 'danger';
+
+export interface TkxAlertProps {
+  variant: AlertVariant;
+  title?: string;
+  children: ReactNode;
+  dismissible?: boolean;
+  onDismiss?: () => void;
+  icon?: ReactNode;
+  style?: React.CSSProperties;
+  className?: string;
+}
+
+const ICONS: Record<AlertVariant, ReactNode> = {
+  info: (
+    <svg width="20" height="20" 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="20" height="20" 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>
+  ),
+  warning: (
+    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+      <path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" />
+    </svg>
+  ),
+  danger: (
+    <svg width="20" height="20" 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>
+  ),
+};
+
+export function TkxAlert({ variant, title, children, dismissible, onDismiss, icon, style, className }: TkxAlertProps) {
+  const theme = useTheme();
+  const announce = useAnnounce();
+  const safeTitle = title ? sanitizeString(title) : undefined;
+
+  useEffect(() => {
+    if (safeTitle) {
+      announce(safeTitle, variant === 'danger' || variant === 'warning' ? 'assertive' : 'polite');
+    }
+  }, [safeTitle, variant, announce]);
+
+  const colorMap: Record<AlertVariant, string> = {
+    info: theme.info, success: theme.success, warning: theme.warning, danger: theme.danger,
+  };
+  const accentColor = colorMap[variant];
+  const role = variant === 'danger' || variant === 'warning' ? 'alert' : 'status';
+
+  return (
+    <div
+      role={role}
+      className={tkx('flex items-start gap-3 px-4 py-3 rounded-lg border animate-fade-in font-sans', className ?? '')}
+      style={{ backgroundColor: `${accentColor}18`, borderColor: accentColor, color: theme.text, ...style }}
+    >
+      <span className={tkx('shrink-0 mt-[1px]')} style={{ color: accentColor }}>
+        {icon ?? ICONS[variant]}
+      </span>
+
+      <div className={tkx('flex-1 min-w-0')}>
+        {safeTitle && (
+          <p className={tkx('m-0 font-semibold text-sm mb-1')}>{safeTitle}</p>
+        )}
+        <div className={tkx('text-sm leading-relaxed')}>{children}</div>
+      </div>
+
+      {dismissible && onDismiss && (
+        <button
+          aria-label="Dismiss alert"
+          onClick={onDismiss}
+          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="16" height="16" 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>
+  );
+}