# @ino-ui/tv

A comprehensive TV UI component library built with React and TypeScript for smart TV applications.

## Features

- 🎮 **Remote Control Navigation** - Built-in keyboard/remote control navigation support
- 📺 **TV-Optimized Components** - Components designed specifically for TV interfaces
- 🎨 **Theming Support** - Customizable themes and styling
- ♿ **Accessibility** - ARIA support and screen reader compatibility
- 📱 **Responsive** - Works across different TV screen sizes
- 🔧 **TypeScript** - Full TypeScript support with type definitions

## Installation

```bash
npm install @ino-ui/tv
# or
yarn add @ino-ui/tv
```

## Quick Start

```tsx
import React from 'react';
import { ThemeProvider, InoButton, GridView } from '@ino-ui/tv';

function App() {
  return (
    <ThemeProvider
      theme={{
        colors: {
          primary: '#0066cc',
          secondary: '#666666',
        },
      }}
    >
      <div>
        <InoButton isActive onClick={() => console.log('Clicked!')}>
          Click me
        </InoButton>

        <GridView data={[1, 2, 3, 4]} renderItem={({ item }) => <div>Item {item}</div>} />
      </div>
    </ThemeProvider>
  );
}
```

## Components

### Navigation Components

- `InoButton` - TV-optimized button with focus states
- `GridView` - Grid layout with remote navigation
- `ListView` - List view with keyboard navigation
- `InoTabs` - Tab navigation component

### Input Components

- `InoInput` - Text input with virtual keyboard support
- `InoKeyboard` - Virtual keyboard component
- `InoSelect` - Dropdown select component
- `InoSwitch` - Toggle switch component

### Layout Components

- `InoLayout` - Grid layout system
- `InoRow` / `InoCol` - Row and column components
- `ScrollView` - Scrollable container
- `Modal` - Modal dialog component

### Media Components

- `InoPlayerProgress` - Video player progress bar
- `Timeline` - EPG timeline component
- `EPGTimeline` - Electronic Program Guide

### Utility Components

- `ThemeProvider` - Theme context provider
- `ToastProvider` - Toast notification system
- `InoSkeleton` - Loading skeleton components

## Navigation

The library includes built-in support for TV remote control navigation:

```tsx
import { useMappedKeydown } from '@ino-ui/tv';

function MyComponent() {
  useMappedKeydown({
    isActive: true,
    onUp: () => console.log('Up pressed'),
    onDown: () => console.log('Down pressed'),
    onLeft: () => console.log('Left pressed'),
    onRight: () => console.log('Right pressed'),
    onOk: () => console.log('OK pressed'),
    onBack: () => console.log('Back pressed'),
  });

  return <div>My navigable component</div>;
}
```

## Theming

Customize the appearance of components:

```tsx
const theme = {
  colors: {
    primary: '#0066cc',
    secondary: '#666666',
    danger: '#ff4444',
    warning: '#ffaa00',
    text: {
      primary: '#ffffff',
      secondary: '#cccccc',
    },
  },
  fonts: {
    sizes: {
      small: '12px',
      medium: '16px',
      large: '20px',
    },
    weights: {
      light: 300,
      regular: 400,
      bold: 700,
    },
  },
  borderRadius: {
    small: '4px',
    medium: '8px',
  },
};

<ThemeProvider theme={theme}>
  <App />
</ThemeProvider>;
```

## Requirements

- React >= 16.8.0
- React DOM >= 16.8.0

## License

MIT

## Contributing

Contributions are welcome! Please feel free to submit a Pull Request.