# @lilith/ui-accessibility

React hooks for accessibility features and device detection.

## Installation

```bash
pnpm add @lilith/ui-accessibility
```

## Features

- 🎯 **Zero dependencies** - Only peer dependencies on React
- ♿ **Accessibility-first** - Respects user preferences
- 📱 **Device detection** - Touch vs mouse optimization
- 🎨 **Framework agnostic** - Works with any React setup
- 📦 **Tiny bundle** - Minimal overhead

## Hooks

### `useReducedMotion()`

Detects if the user has enabled "reduced motion" in their OS accessibility settings.

```tsx
import { useReducedMotion } from '@lilith/ui-accessibility'
import { motion } from 'framer-motion'

function AnimatedComponent() {
  const prefersReducedMotion = useReducedMotion()

  return (
    <motion.div
      animate={prefersReducedMotion ? {} : { x: 100, opacity: 1 }}
      transition={{ duration: 0.5 }}
    >
      Content
    </motion.div>
  )
}
```

### `useTouchDevice()`

Detects if the device supports touch input.

```tsx
import { useTouchDevice } from '@lilith/ui-accessibility'

function InteractiveElement() {
  const isTouchDevice = useTouchDevice()

  return (
    <button
      style={{
        minHeight: isTouchDevice ? '44px' : '32px', // Larger touch targets
        cursor: isTouchDevice ? 'pointer' : 'default'
      }}
    >
      {isTouchDevice ? 'Tap' : 'Click'} me
    </button>
  )
}
```

## Best Practices

### Respecting Reduced Motion

Always check `useReducedMotion()` before applying:
- Parallax scrolling effects
- Particle animations
- Auto-playing videos
- Rapid color changes
- Any motion that could cause discomfort

### Touch-Friendly Design

When `useTouchDevice()` returns `true`:
- Increase touch target size (minimum 44x44px)
- Remove hover-dependent interactions
- Simplify complex gestures
- Consider mobile-first layouts

## Browser Support

These hooks use standard Web APIs supported by all modern browsers:
- `matchMedia()` for reduced motion detection
- `ontouchstart`, `maxTouchPoints`, and media queries for touch detection

## License

MIT © Lilith Platform