npm package: @lendliq/ui
Description: LendLiq UI Components - Reusable React components for DeFi applications
Author: LendLiq Team
Latest version: 1.0.0

# @lendliq/ui

Reusable React components for DeFi applications. Built with TailwindCSS and designed for dark mode support.

## Installation

```bash
npm install @lendliq/ui
# or
yarn add @lendliq/ui
# or
pnpm add @lendliq/ui
```

## Requirements

- React 18+
- TailwindCSS (for styling)

## Setup

Add the following to your `tailwind.config.js` to enable the custom colors used by the components:

```js
module.exports = {
  // ... other config
  theme: {
    extend: {
      colors: {
        primary: {
          50: '#f0f9ff',
          100: '#e0f2fe',
          200: '#bae6fd',
          300: '#7dd3fc',
          400: '#38bdf8',
          500: '#0ea5e9',
          600: '#0284c7',
          700: '#0369a1',
          800: '#075985',
          900: '#0c4a6e',
        },
      },
      backgroundImage: {
        'gradient-primary': 'linear-gradient(135deg, #0ea5e9 0%, #8b5cf6 100%)',
      },
    },
  },
};
```

## Components

### Button

A versatile button component with multiple variants and sizes.

```tsx
import { Button } from '@lendliq/ui';

<Button variant="primary" size="md">
  Connect Wallet
</Button>

<Button variant="outline" isLoading>
  Processing...
</Button>

<Button variant="danger" fullWidth>
  Disconnect
</Button>
```

**Props:**
- `variant`: `'primary' | 'secondary' | 'outline' | 'ghost' | 'danger'`
- `size`: `'sm' | 'md' | 'lg'`
- `isLoading`: Shows loading spinner
- `fullWidth`: Makes button full width

### Card

Container component with optional hover effects.

```tsx
import { Card, CardHeader, CardFooter } from '@lendliq/ui';

<Card padding="md" hover>
  <CardHeader
    title="Swap"
    subtitle="Trade tokens instantly"
    action={<Button size="sm">Settings</Button>}
  />
  {/* Card content */}
  <CardFooter>
    <Button fullWidth>Swap</Button>
  </CardFooter>
</Card>
```

### Spinner & Loader

Loading indicators for async operations.

```tsx
import { Spinner, Loader } from '@lendliq/ui';

<Spinner size="md" color="primary" />

<Loader text="Loading pools..." fullScreen />
```

### TokenIcon

Display token icons with fallback support.

```tsx
import { TokenIcon, TokenPairIcon } from '@lendliq/ui';

<TokenIcon
  symbol="ETH"
  logoUrl="https://..."
  size="md"
/>

<TokenPairIcon
  token0Symbol="ETH"
  token1Symbol="USDT"
  token0LogoUrl="https://..."
  token1LogoUrl="https://..."
  size="lg"
/>
```

### Skeleton

Loading placeholder components.

```tsx
import { Skeleton, SkeletonText, SkeletonCard, SkeletonTable } from '@lendliq/ui';

<Skeleton height="2rem" width="100%" />

<Skeleton circle width={40} height={40} />

<SkeletonText lines={3} />

<SkeletonCard />

<SkeletonTable rows={5} columns={4} />
```

### Alert & Banner

Notification components for user feedback.

```tsx
import { Alert, Banner } from '@lendliq/ui';

<Alert type="success" title="Transaction Confirmed">
  Your swap was successful!
</Alert>

<Alert type="error" onClose={() => {}}>
  Insufficient balance
</Alert>

<Banner type="warning" onClose={() => {}}>
  Network congestion detected
</Banner>
```

**Types:** `'info' | 'success' | 'warning' | 'error'`

### TickInput

Numeric input with increment/decrement buttons for tick-based inputs.

```tsx
import { TickInput } from '@lendliq/ui';

<TickInput
  value={price}
  onChange={setPrice}
  onIncrement={() => adjustTick(1)}
  onDecrement={() => adjustTick(-1)}
  onBlur={alignToNearestTick}
  label="Min Price"
  sublabel="USDT per ETH"
/>
```

## Dark Mode

All components support dark mode out of the box. They use Tailwind's `dark:` variants and will automatically adapt to your application's dark mode setting.

## License

MIT