npm package: @kodeme-io/next-core-ui
Description: UI component library for Next.js + Odoo applications
Author: ABC Food
Latest version: 0.8.4

# @next-odoo/ui

UI component library for Next.js + Odoo applications with dark mode, i18n, and mobile-first design.

## Features

- ✅ **ShadCN UI Components** - 21 customizable Radix UI components
- ✅ **Dark Mode** - Built-in theme support with next-themes
- ✅ **Internationalization** - EN/ID translations with type-safe keys
- ✅ **Mobile Components** - Touch-friendly bottom navigation and headers
- ✅ **Responsive Design** - Mobile-first with Tailwind CSS
- ✅ **Type Safety** - 100% TypeScript with full type definitions

## Installation

```bash
pnpm add @next-odoo/ui
```

### Peer Dependencies

```bash
pnpm add react react-dom next
```

## Usage

### UI Components

```typescript
import { Button, Card, Dialog } from '@next-odoo/ui'

export function MyComponent() {
  return (
    <Card>
      <Button variant="default">Click me</Button>
    </Card>
  )
}
```

### Dark Mode

```typescript
import { ThemeProvider, ThemeToggle } from '@next-odoo/ui'

export function App() {
  return (
    <ThemeProvider attribute="class" defaultTheme="system">
      <ThemeToggle />
      {/* Your app */}
    </ThemeProvider>
  )
}
```

### Internationalization

```typescript
import { useTranslation, useLanguageStore } from '@next-odoo/ui'

export function MyComponent() {
  const { t, locale, setLocale } = useTranslation()

  return (
    <div>
      <p>{t('common.welcome')}</p>
      <button onClick={() => setLocale('id')}>Bahasa</button>
      <button onClick={() => setLocale('en')}>English</button>
    </div>
  )
}
```

### Mobile Components

```typescript
import { BottomNav, MobileHeader } from '@next-odoo/ui'

export function MobileLayout() {
  return (
    <>
      <MobileHeader title="Dashboard" />
      {/* Content */}
      <BottomNav />
    </>
  )
}
```

## Import Styles

Add to your `app/layout.tsx` or `_app.tsx`:

```typescript
import '@next-odoo/ui/styles'
```

## Tailwind Configuration

Extend your `tailwind.config.js`:

```javascript
module.exports = {
  content: [
    './src/**/*.{js,ts,jsx,tsx}',
    './node_modules/@next-odoo/ui/dist/**/*.{js,mjs}',
  ],
  theme: {
    extend: {
      // Copy theme configuration from @next-odoo/ui
    },
  },
  plugins: [require('tailwindcss-animate')],
}
```

## Components

### UI Components

- Alert, AlertDialog
- Badge, Button
- Card, Checkbox
- Dialog, DropdownMenu
- Form, Input, Label
- LoadingSpinner, NumberInput
- Progress, RadioGroup
- Select, Skeleton
- Tabs, Textarea, Tooltip

### Mobile Components

- BottomNav - Bottom navigation bar
- MobileHeader - Mobile page header

### Theme Components

- ThemeProvider - Theme context provider
- ThemeToggle - Light/Dark/System mode toggle

## Translation Keys

The i18n system provides type-safe translation keys:

```typescript
// Type-safe keys with autocomplete
t('common.save')
t('customer.status.approved')
t('visit.objectives.canvas')

// With variable interpolation
t('visit.checkInAt', { location: 'Store A' })
```

## Customization

All components use CSS variables for theming. Override in your `globals.css`:

```css
:root {
  --primary: 222.2 47.4% 11.2%;
  --primary-foreground: 210 40% 98%;
  /* ... */
}

.dark {
  --primary: 210 40% 98%;
  --primary-foreground: 222.2 47.4% 11.2%;
  /* ... */
}
```

## License

MIT