tekivex-ui 2.5.15 → 2.6.0

package/src/components/TkxRadio.tsx

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

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