tekivex-ui 2.0.0

package/src/components/TkxProgress.tsx

@@ -0,0 +1,114 @@
+import { forwardRef, type HTMLAttributes } from 'react';
+import { useTheme } from '../themes';
+import { useReducedMotion } from '../hooks';
+import { validateProps } from '../engine/security';
+import { tkx, cx } from '../engine/tkx';
+
+export type ProgressVariant = 'linear' | 'circular';
+export type ProgressSize = 'sm' | 'md' | 'lg';
+
+export interface TkxProgressProps extends HTMLAttributes<HTMLDivElement> {
+  value?: number;
+  variant?: ProgressVariant;
+  size?: ProgressSize;
+  label?: string;
+  showValue?: boolean;
+  color?: string;
+}
+
+const LINEAR_H: Record<ProgressSize, string> = { sm: '4px', md: '8px', lg: '12px' };
+const CIRCLE_PX: Record<ProgressSize, number> = { sm: 32, md: 48, lg: 64 };
+
+export const TkxProgress = forwardRef<HTMLDivElement, TkxProgressProps>(
+  ({ value, variant = 'linear', size = 'md', label, showValue, color, className, style, ...rest }, ref) => {
+    const theme = useTheme();
+    const reducedMotion = useReducedMotion();
+    const fillColor = color ?? theme.primary;
+    const isIndeterminate = value === undefined;
+    const clamped = value !== undefined ? Math.min(100, Math.max(0, value)) : 0;
+
+    if (value !== undefined) {
+      const { errors } = validateProps({ value }, { value: { type: 'number', min: 0, max: 100 } });
+      if (errors.length > 0) {
+        // eslint-disable-next-line no-console
+        console.warn('[TkxProgress]', errors.join(', '));
+      }
+    }
+
+    if (variant === 'circular') {
+      const px = CIRCLE_PX[size];
+      const strokeW = size === 'sm' ? 3 : size === 'md' ? 4 : 5;
+      const r = (px - strokeW * 2) / 2;
+      const circ = 2 * Math.PI * r;
+      const offset = isIndeterminate ? 0 : circ - (clamped / 100) * circ;
+
+      return (
+        <div
+          ref={ref}
+          role="progressbar"
+          aria-valuemin={0}
+          aria-valuemax={100}
+          aria-valuenow={isIndeterminate ? undefined : clamped}
+          aria-label={label ?? (isIndeterminate ? 'Loading' : `${clamped}%`)}
+          className={cx(tkx('inline-flex flex-col items-center gap-1'), className)}
+          style={style}
+          {...rest}
+        >
+          <svg width={px} height={px} viewBox={`0 0 ${px} ${px}`} aria-hidden="true">
+            <circle cx={px / 2} cy={px / 2} r={r} fill="none" stroke={theme.border} strokeWidth={strokeW} />
+            <circle
+              cx={px / 2} cy={px / 2} r={r} fill="none"
+              stroke={fillColor} strokeWidth={strokeW} strokeLinecap="round"
+              strokeDasharray={circ} strokeDashoffset={offset}
+              transform={`rotate(-90 ${px / 2} ${px / 2})`}
+              style={{
+                transition: reducedMotion ? 'none' : 'stroke-dashoffset 300ms ease',
+                animation: isIndeterminate && !reducedMotion ? 'tkx-spin 1s linear infinite' : undefined,
+              }}
+            />
+          </svg>
+          {showValue && !isIndeterminate && (
+            <span className={tkx('text-xs')} style={{ color: theme.textMuted }}>{clamped}%</span>
+          )}
+        </div>
+      );
+    }
+
+    const h = LINEAR_H[size];
+    return (
+      <div
+        ref={ref}
+        role="progressbar"
+        aria-valuemin={0}
+        aria-valuemax={100}
+        aria-valuenow={isIndeterminate ? undefined : clamped}
+        aria-label={label ?? (isIndeterminate ? 'Loading' : `${clamped}%`)}
+        className={cx(tkx('flex flex-col gap-1 w-full'), className)}
+        style={style}
+        {...rest}
+      >
+        {label && (
+          <div className={tkx('flex justify-between text-sm')} style={{ color: theme.text }}>
+            <span>{label}</span>
+            {showValue && !isIndeterminate && <span>{clamped}%</span>}
+          </div>
+        )}
+        <div
+          className={tkx('w-full overflow-hidden')}
+          style={{ height: h, borderRadius: h, backgroundColor: theme.border }}
+        >
+          <div
+            style={{
+              height: '100%', borderRadius: h, backgroundColor: fillColor,
+              width: isIndeterminate ? '40%' : `${clamped}%`,
+              transition: reducedMotion ? 'none' : 'width 300ms ease',
+              animation: isIndeterminate && !reducedMotion ? 'tkx-shimmer 1.5s ease-in-out infinite' : undefined,
+            }}
+          />
+        </div>
+      </div>
+    );
+  },
+);
+
+TkxProgress.displayName = 'TkxProgress';

package/src/components/TkxRadio.tsx

@@ -0,0 +1,284 @@
+import {
+  createContext,
+  useContext,
+  useId,
+  useState,
+  useRef,
+  forwardRef,
+  type InputHTMLAttributes,
+  type ReactNode,
+} from 'react';
+import { useTheme } from '../themes';
+import { sanitizeString } from '../engine/security';
+import { getAccessibleForeground } from '../engine/wcag';
+import { useReducedMotion } from '../hooks';
+import { tkx, cx } from '../engine/tkx';
+
+// ── Radio Group Context ───────────────────────────────────────────────────────
+
+interface RadioGroupContextValue {
+  name: string;
+  value: string;
+  onChange: (value: string) => void;
+  isDisabled: boolean;
+  isInvalid: boolean;
+}
+
+const RadioGroupContext = createContext<RadioGroupContextValue | null>(null);
+
+function useRadioGroup() {
+  return useContext(RadioGroupContext);
+}
+
+// ── Size map ──────────────────────────────────────────────────────────────────
+
+const SIZE_MAP = {
+  sm: { outer: 16, inner: 7, fontSize: '13px' },
+  md: { outer: 20, inner: 9, fontSize: '14px' },
+  lg: { outer: 24, inner: 11, fontSize: '15px' },
+} as const;
+
+// ── TkxRadio ─────────────────────────────────────────────────────────────────
+
+export interface TkxRadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> {
+  label?: ReactNode;
+  hint?: string;
+  size?: 'sm' | 'md' | 'lg';
+  colorScheme?: 'primary' | 'success' | 'danger';
+}
+
+export const TkxRadio = forwardRef<HTMLInputElement, TkxRadioProps>(
+  (
+    {
+      label,
+      hint,
+      size = 'md',
+      colorScheme = 'primary',
+      value,
+      checked: checkedProp,
+      onChange: onChangeProp,
+      disabled: disabledProp,
+      name: nameProp,
+      className,
+      style,
+      id: idProp,
+      ...rest
+    },
+    ref,
+  ) => {
+    const theme = useTheme();
+    const reducedMotion = useReducedMotion();
+    const autoId = useId();
+    const id = idProp ?? autoId;
+
+    const group = useRadioGroup();
+
+    const isChecked = group
+      ? group.value === String(value ?? '')
+      : (checkedProp ?? false);
+
+    const isDisabled = disabledProp ?? group?.isDisabled ?? false;
+    const radioName = nameProp ?? group?.name ?? '';
+
+    const handleChange = () => {
+      if (isDisabled) return;
+      if (group) {
+        group.onChange(String(value ?? ''));
+      } else {
+        onChangeProp?.({ target: { value: String(value ?? '') } } as React.ChangeEvent<HTMLInputElement>);
+      }
+    };
+
+    const sz = SIZE_MAP[size];
+
+    const schemeColor: Record<string, string> = {
+      primary: theme.primary,
+      success: theme.success,
+      danger: theme.danger,
+    };
+    const accentColor = schemeColor[colorScheme] ?? theme.primary;
+    const dotColor = getAccessibleForeground(accentColor);
+
+    const outerBorder = isChecked ? accentColor : theme.border;
+    const outerBg = theme.surface;
+
+    const dotAnimStyle: React.CSSProperties =
+      !reducedMotion && isChecked
+        ? { animation: 'tkx-radio-dot-in 130ms ease forwards' }
+        : {};
+
+    return (
+      <div
+        className={cx(tkx('flex flex-col gap-0.5'), className)}
+        style={{ opacity: isDisabled ? 0.5 : 1, ...style }}
+      >
+        <style>{`
+          @keyframes tkx-radio-dot-in {
+            from { transform: scale(0) translate(-50%, -50%); opacity: 0; }
+            to   { transform: scale(1) translate(-50%, -50%); opacity: 1; }
+          }
+        `}</style>
+
+        <label
+          htmlFor={id}
+          className={tkx('flex items-center gap-2 select-none')}
+          style={{ cursor: isDisabled ? 'not-allowed' : 'pointer', fontFamily: 'inherit' }}
+        >
+          {/* Hidden native input */}
+          <input
+            ref={ref}
+            id={id}
+            type="radio"
+            name={radioName}
+            value={value}
+            checked={isChecked}
+            onChange={handleChange}
+            disabled={isDisabled}
+            aria-invalid={group?.isInvalid}
+            className={tkx('sr-only')}
+            {...rest}
+          />
+
+          {/* Custom styled circle */}
+          <span
+            aria-hidden="true"
+            style={{
+              position: 'relative',
+              width: sz.outer,
+              height: sz.outer,
+              minWidth: sz.outer,
+              borderRadius: '50%',
+              border: `2px solid ${outerBorder}`,
+              backgroundColor: outerBg,
+              display: 'inline-block',
+              boxSizing: 'border-box',
+              transition: reducedMotion ? 'none' : 'border-color 120ms',
+            }}
+          >
+            {isChecked && (
+              <span
+                aria-hidden="true"
+                style={{
+                  position: 'absolute',
+                  top: '50%',
+                  left: '50%',
+                  width: sz.inner,
+                  height: sz.inner,
+                  borderRadius: '50%',
+                  backgroundColor: accentColor,
+                  transform: 'translate(-50%, -50%)',
+                  transformOrigin: 'center',
+                  ...(reducedMotion ? {} : { animation: 'tkx-radio-dot-in 130ms ease forwards' }),
+                }}
+              />
+            )}
+          </span>
+
+          {label && (
+            <span style={{ fontSize: sz.fontSize, color: theme.text, lineHeight: 1.4 }}>
+              {typeof label === 'string' ? sanitizeString(label) : label}
+            </span>
+          )}
+        </label>
+
+        {hint && (
+          <span
+            className={tkx('text-xs')}
+            style={{ color: theme.textMuted, marginLeft: sz.outer + 8 }}
+          >
+            {sanitizeString(hint)}
+          </span>
+        )}
+      </div>
+    );
+  },
+);
+
+TkxRadio.displayName = 'TkxRadio';
+
+// ── TkxRadioGroup ─────────────────────────────────────────────────────────────
+
+export interface TkxRadioGroupProps {
+  name: string;
+  value?: string;
+  defaultValue?: string;
+  onChange?: (value: string) => void;
+  label?: string;
+  orientation?: 'horizontal' | 'vertical';
+  isDisabled?: boolean;
+  isInvalid?: boolean;
+  errorMessage?: string;
+  children: ReactNode;
+}
+
+export function TkxRadioGroup({
+  name,
+  value: valueProp,
+  defaultValue = '',
+  onChange,
+  label,
+  orientation = 'vertical',
+  isDisabled = false,
+  isInvalid = false,
+  errorMessage,
+  children,
+}: TkxRadioGroupProps) {
+  const theme = useTheme();
+  const groupId = useId();
+  const errorId = `${groupId}-error`;
+
+  const [internalValue, setInternalValue] = useState(defaultValue);
+  const isControlled = valueProp !== undefined;
+  const currentValue = isControlled ? valueProp : internalValue;
+
+  const handleChange = (val: string) => {
+    if (!isControlled) setInternalValue(val);
+    onChange?.(val);
+  };
+
+  const hasError = isInvalid || !!errorMessage;
+
+  return (
+    <RadioGroupContext.Provider
+      value={{ name, value: currentValue, onChange: handleChange, isDisabled, isInvalid }}
+    >
+      <div
+        role="radiogroup"
+        aria-label={label ? sanitizeString(label) : undefined}
+        aria-describedby={hasError ? errorId : undefined}
+        aria-invalid={hasError}
+      >
+        {label && (
+          <div
+            className={tkx('text-sm font-medium font-sans mb-2')}
+            style={{ color: theme.text }}
+          >
+            {sanitizeString(label)}
+          </div>
+        )}
+
+        <div
+          className={tkx(
+            orientation === 'horizontal' ? 'flex flex-row flex-wrap gap-4' : 'flex flex-col gap-2',
+          )}
+        >
+          {children}
+        </div>
+
+        {hasError && errorMessage && (
+          <span
+            id={errorId}
+            role="alert"
+            className={tkx('text-xs flex items-center gap-1 mt-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>
+            {sanitizeString(errorMessage)}
+          </span>
+        )}
+      </div>
+    </RadioGroupContext.Provider>
+  );
+}

package/src/components/TkxRating.tsx

@@ -0,0 +1,286 @@
+import {
+  useState,
+  useRef,
+  useCallback,
+  useId,
+  type KeyboardEvent,
+  type MouseEvent,
+} from 'react';
+import { useTheme } from '../themes';
+import { sanitizeString } from '../engine/security';
+import { useReducedMotion } from '../hooks';
+import { tkx, cx } from '../engine/tkx';
+
+export type RatingSize = 'sm' | 'md' | 'lg' | 'xl';
+
+export interface TkxRatingProps {
+  value?: number;
+  defaultValue?: number;
+  onChange?: (value: number) => void;
+  max?: number;
+  precision?: 0.5 | 1;
+  size?: RatingSize;
+  isReadOnly?: boolean;
+  isDisabled?: boolean;
+  label?: string;
+  showValue?: boolean;
+  colorScheme?: 'warning' | 'primary' | 'danger';
+  emptyIcon?: 'star' | 'heart' | 'circle';
+  filledIcon?: 'star' | 'heart' | 'circle';
+}
+
+const SIZE_MAP: Record<RatingSize, number> = { sm: 16, md: 24, lg: 32, xl: 40 };
+
+// ── Icon SVGs ─────────────────────────────────────────────────────────────────
+
+function StarIcon({ size, filled, color, halfFilled, id }: { size: number; filled: boolean; color: string; halfFilled?: boolean; id?: string }) {
+  const gradId = id ? `hg-${id}` : undefined;
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" aria-hidden="true" style={{ display: 'block' }}>
+      {halfFilled && gradId && (
+        <defs>
+          <linearGradient id={gradId} x1="0" x2="1" y1="0" y2="0">
+            <stop offset="50%" stopColor={color} />
+            <stop offset="50%" stopColor="transparent" />
+          </linearGradient>
+        </defs>
+      )}
+      <polygon
+        points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"
+        fill={halfFilled && gradId ? `url(#${gradId})` : filled ? color : 'none'}
+        stroke={color}
+        strokeWidth={1.5}
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+function HeartIcon({ size, filled, color, halfFilled, id }: { size: number; filled: boolean; color: string; halfFilled?: boolean; id?: string }) {
+  const gradId = id ? `hg-${id}` : undefined;
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" aria-hidden="true" style={{ display: 'block' }}>
+      {halfFilled && gradId && (
+        <defs>
+          <linearGradient id={gradId} x1="0" x2="1" y1="0" y2="0">
+            <stop offset="50%" stopColor={color} />
+            <stop offset="50%" stopColor="transparent" />
+          </linearGradient>
+        </defs>
+      )}
+      <path
+        d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"
+        fill={halfFilled && gradId ? `url(#${gradId})` : filled ? color : 'none'}
+        stroke={color}
+        strokeWidth={1.5}
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+function CircleIcon({ size, filled, color, halfFilled, id }: { size: number; filled: boolean; color: string; halfFilled?: boolean; id?: string }) {
+  const gradId = id ? `hg-${id}` : undefined;
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" aria-hidden="true" style={{ display: 'block' }}>
+      {halfFilled && gradId && (
+        <defs>
+          <linearGradient id={gradId} x1="0" x2="1" y1="0" y2="0">
+            <stop offset="50%" stopColor={color} />
+            <stop offset="50%" stopColor="transparent" />
+          </linearGradient>
+        </defs>
+      )}
+      <circle
+        cx="12" cy="12" r="9"
+        fill={halfFilled && gradId ? `url(#${gradId})` : filled ? color : 'none'}
+        stroke={color}
+        strokeWidth={1.5}
+      />
+    </svg>
+  );
+}
+
+type IconType = 'star' | 'heart' | 'circle';
+
+function RatingIcon({ type, size, filled, color, halfFilled, uid }: {
+  type: IconType; size: number; filled: boolean; color: string; halfFilled?: boolean; uid?: string;
+}) {
+  const props = { size, filled, color, halfFilled, id: uid };
+  if (type === 'heart') return <HeartIcon {...props} />;
+  if (type === 'circle') return <CircleIcon {...props} />;
+  return <StarIcon {...props} />;
+}
+
+// ── Helpers ───────────────────────────────────────────────────────────────────
+
+function clamp(value: number, min: number, max: number): number {
+  return Math.min(max, Math.max(min, value));
+}
+
+function snapToPrecision(raw: number, precision: 0.5 | 1): number {
+  if (precision === 1) return Math.round(raw);
+  return Math.round(raw * 2) / 2;
+}
+
+function getHoverValue(e: MouseEvent<HTMLSpanElement>, index: number, precision: 0.5 | 1): number {
+  if (precision === 1) return index + 1;
+  const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+  const midpoint = rect.left + rect.width / 2;
+  return e.clientX < midpoint ? index + 0.5 : index + 1;
+}
+
+// ── Component ─────────────────────────────────────────────────────────────────
+
+export function TkxRating({
+  value: controlledValue,
+  defaultValue = 0,
+  onChange,
+  max = 5,
+  precision = 1,
+  size = 'md',
+  isReadOnly = false,
+  isDisabled = false,
+  label,
+  showValue = false,
+  colorScheme = 'warning',
+  emptyIcon = 'star',
+  filledIcon = 'star',
+}: TkxRatingProps) {
+  const theme = useTheme();
+  const reducedMotion = useReducedMotion();
+  const groupId = useId();
+  const isControlled = controlledValue !== undefined;
+  const [internalValue, setInternalValue] = useState(defaultValue);
+  const [hoverValue, setHoverValue] = useState<number | null>(null);
+  const rootRef = useRef<HTMLDivElement>(null);
+
+  const activeValue = isControlled ? (controlledValue ?? 0) : internalValue;
+  const displayValue = hoverValue ?? activeValue;
+
+  const colorMap: Record<string, string> = {
+    warning: theme.warning,
+    primary: theme.primary,
+    danger:  theme.danger,
+  };
+  const iconColor = colorMap[colorScheme] ?? theme.warning;
+  const px = SIZE_MAP[size];
+  const isInteractive = !isReadOnly && !isDisabled;
+
+  const commit = useCallback((val: number) => {
+    if (!isControlled) setInternalValue(val);
+    onChange?.(val);
+  }, [isControlled, onChange]);
+
+  const handleMouseMove = useCallback((e: MouseEvent<HTMLSpanElement>, index: number) => {
+    if (!isInteractive) return;
+    setHoverValue(getHoverValue(e, index, precision));
+  }, [isInteractive, precision]);
+
+  const handleMouseLeave = useCallback(() => {
+    if (!isInteractive) return;
+    setHoverValue(null);
+  }, [isInteractive]);
+
+  const handleClick = useCallback((e: MouseEvent<HTMLSpanElement>, index: number) => {
+    if (!isInteractive) return;
+    const val = getHoverValue(e, index, precision);
+    // Toggle off if clicking the same value
+    const next = val === activeValue ? 0 : val;
+    commit(next);
+  }, [isInteractive, precision, activeValue, commit]);
+
+  const handleKeyDown = useCallback((e: KeyboardEvent<HTMLDivElement>) => {
+    if (!isInteractive) return;
+    const step = precision;
+    let next = activeValue;
+    if (e.key === 'ArrowRight' || e.key === 'ArrowUp') { e.preventDefault(); next = clamp(activeValue + step, 0, max); }
+    else if (e.key === 'ArrowLeft' || e.key === 'ArrowDown') { e.preventDefault(); next = clamp(activeValue - step, 0, max); }
+    else if (e.key === 'Home') { e.preventDefault(); next = 0; }
+    else if (e.key === 'End') { e.preventDefault(); next = max; }
+    else return;
+    next = snapToPrecision(next, precision);
+    commit(next);
+  }, [isInteractive, activeValue, max, precision, commit]);
+
+  const safeLabel = label ? sanitizeString(label) : 'Rating';
+
+  return (
+    <div
+      className={cx(
+        tkx('inline-flex items-center gap-2 font-sans'),
+        isDisabled ? tkx('opacity-50') : '',
+      )}
+    >
+      <div
+        ref={rootRef}
+        role="radiogroup"
+        aria-label={safeLabel}
+        aria-disabled={isDisabled}
+        aria-readonly={isReadOnly}
+        tabIndex={isInteractive ? 0 : -1}
+        onKeyDown={handleKeyDown}
+        onMouseLeave={handleMouseLeave}
+        className={tkx('flex items-center gap-0.5 outline-none')}
+        style={{ cursor: isInteractive ? 'pointer' : 'default' }}
+      >
+        {Array.from({ length: max }, (_, i) => {
+          const starValue = i + 1;
+          const halfValue = i + 0.5;
+          const isFilled = displayValue >= starValue;
+          const isHalf = !isFilled && precision === 0.5 && displayValue >= halfValue;
+          const uid = `${groupId}-${i}`;
+
+          return (
+            <span
+              key={i}
+              role="radio"
+              aria-checked={
+                precision === 0.5
+                  ? activeValue === halfValue || activeValue === starValue
+                  : activeValue === starValue
+              }
+              aria-label={
+                precision === 0.5
+                  ? `${halfValue} star${halfValue !== 1 ? 's' : ''} / ${starValue} star${starValue !== 1 ? 's' : ''}`
+                  : `${starValue} star${starValue !== 1 ? 's' : ''}`
+              }
+              tabIndex={-1}
+              onMouseMove={(e) => handleMouseMove(e, i)}
+              onClick={(e) => handleClick(e, i)}
+              style={{
+                display: 'inline-flex',
+                alignItems: 'center',
+                lineHeight: 0,
+                transition: reducedMotion ? 'none' : 'transform 120ms ease',
+                transform: hoverValue !== null && displayValue >= halfValue && isInteractive
+                  ? 'scale(1.15)'
+                  : 'scale(1)',
+              }}
+            >
+              <RatingIcon
+                type={isFilled || isHalf ? filledIcon : emptyIcon}
+                size={px}
+                filled={isFilled}
+                halfFilled={isHalf}
+                color={isFilled || isHalf ? iconColor : theme.border}
+                uid={isHalf ? uid : undefined}
+              />
+            </span>
+          );
+        })}
+      </div>
+
+      {showValue && (
+        <span
+          className={tkx('text-sm tabular-nums')}
+          style={{ color: theme.textMuted }}
+          aria-live="polite"
+          aria-atomic="true"
+        >
+          {activeValue % 1 === 0 ? activeValue.toFixed(0) : activeValue.toFixed(1)} / {max}
+        </span>
+      )}
+    </div>
+  );
+}