@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

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

function App() {
return (
theme={{
colors: {
primary: '#0066cc',
secondary: '#666666',
},
}}
>


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

$3

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

$3

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

$3

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

$3

- 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

`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',
},
};



;
``

Requirements

- React >= 16.8.0
- React DOM >= 16.8.0

License

MIT

Contributing

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