Touch Target

1/**
2 * TouchTarget Component
3 *
4 * Ensures minimum touch target size compliance with Apple Human Interface Guidelines.
5 * Wraps interactive elements to guarantee accessibility on touch devices.
6 *
7 * Apple HIG recommends minimum 44×44pt (44×44px) touch targets.
8 * Material Design recommends 48×48dp for better accessibility.
9 *
10 * @see https://developer.apple.com/design/human-interface-guidelines/layout
11 */
12 
13import { forwardRef, type ReactNode, type HTMLAttributes } from 'react';
14import { cn } from '@/lib/utils';
15 
16/**
17 * Props for the TouchTarget component
18 */
19export interface TouchTargetProps extends HTMLAttributes<HTMLDivElement> {
20  /**
21   * Child element(s) to wrap with touch target
22   */
23  children: ReactNode;
24 
25  /**
26   * Minimum touch target size in pixels
27   * @default 44 - Apple HIG minimum
28   */
29  minSize?: 44 | 48;
30 
31  /**
32   * Center content within touch target
33   * @default true
34   */
35  center?: boolean;
36}
37 
38/**
39 * TouchTarget wrapper component
40 *
41 * Ensures interactive elements meet accessibility standards for touch devices.
42 * Automatically applies minimum dimensions and optional centering.
43 *
44 * @example
45 * ```tsx
46 * // Basic usage with default 44px minimum
47 * <TouchTarget>
48 *   <button className="w-8 h-8">×</button>
49 * </TouchTarget>
50 *
51 * // Material Design 48px minimum
52 * <TouchTarget minSize={48}>
53 *   <Checkbox />
54 * </TouchTarget>
55 *
56 * // Custom alignment
57 * <TouchTarget center={false} className="justify-start">
58 *   <IconButton />
59 * </TouchTarget>
60 * ```
61 */
62export const TouchTarget = forwardRef<HTMLDivElement, TouchTargetProps>(
63  ({ children, minSize = 44, center = true, className, ...props }, ref) => {
64    // Map minSize to Tailwind classes
65    // 44px = 11 × 4px (min-h-11, min-w-11)
66    // 48px = 12 × 4px (min-h-12, min-w-12)
67    const sizeClass = minSize === 44 ? 'min-h-11 min-w-11' : 'min-h-12 min-w-12';
68 
69    return (
70      <div
71        ref={ref}
72        className={cn(
73          sizeClass,
74          center && 'flex items-center justify-center',
75          className
76        )}
77        {...props}
78      >
79        {children}
80      </div>
81    );
82  }
83);
84 
85TouchTarget.displayName = 'TouchTarget';