open-index/open-npm huggingface dataset:
npm package: @iguanads/react
Description: Iguana Design System - React - by Bento
Latest version: 2.12.0

# Iguana DS Bento - React

Core component library for the Iguana Design System. Contains over 50 components built with Radix UI, Tailwind CSS v4, and class-variance-authority (CVA).

## Installation

```bash
pnpm add @iguanads/react
```

### Peer dependencies

```bash
pnpm add react react-dom tailwindcss @iguanads/icons @iguanads/tempo
```

## Usage

### React / Vite

```tsx
import '@iguanads/react/style.css'
import { Button, Heading } from '@iguanads/react'

<Heading size="h1">I am heading</Heading>
<Button>Button</Button>
```

### Next.js

Interactive (client) and presentational (server) components are exported separately:

```tsx
import { Button } from '@iguanads/react/client'
import { Heading } from '@iguanads/react/server'

<Heading size="h1">I am heading</Heading>
<Button>Button</Button>
```

## Components

Includes: Accordion, Alert, AlertDialog, Avatar, Badge, Breadcrumb, Button, Calendar, Card, Carousel, Chart, Checkbox, Collapsible, Command, Counter, DataTable, DatePicker, DateRangePicker, Dialog, DropdownMenu, Form, Heading, Input, InputOTP, Label, List, Loading, Pagination, Popover, Progress, RadioGroup, ScrollArea, Select, Separator, Sheet, Skeleton, Slider, Switch, Table, Tabs, Text, Textarea, Toast, Toggle, ToggleGroup, Tooltip, UploadImage, and more.

## Utilities

The library also exports formatting utilities:

- `cn()` — CSS class merging (clsx + tailwind-merge)
- `phoneMask()`, `moneyMask()`, `creditCardMask()` — input masks
- `formatCurrencyWithSymbol()`, `formatPercentage()` — number formatting
- `generateInitialsName()`, `titleCase()` — string formatting
- `createImage()`, `resizeImg()`, `convertHeicToPng()` — image manipulation
- `reorder()` — list reordering

## Commands

### Development

```bash
pnpm dev
```

### Build

```bash
pnpm build
```

### Tests

```bash
pnpm test
```

Watch mode:

```bash
pnpm test:watch
```

Coverage:

```bash
pnpm test:coverage
```

### Lint

```bash
pnpm lint
```

### Type checking

```bash
pnpm check-types
```
npm package: @iguanads/tempo
Description: Iguana Design System - Tempo - by Bento
Latest version: 1.2.0

# Iguana DS Bento - Tempo

Date/time utility library for the Iguana Design System. A wrapper around [dayjs](https://day.js.org/) with timezone and UTC plugins.

## Installation

```bash
pnpm add @iguanads/tempo
```

## Configuration

Create a config file in the root of your project (e.g., `tempo.config.ts`):

```ts
import { tempo } from '@iguanads/tempo'
import { timezone, utc } from '@iguanads/tempo/plugins'

tempo.extend(utc)
tempo.extend(timezone)
```

## Usage

```ts
import { tempo } from '@iguanads/tempo'

tempo()                                          // current date as Tempo object
tempo(new Date())                                // from Date
tempo(new Date()).tz('America/Cayman')           // with timezone
tempo('2022-06-10').format('YYYY-MM-DD')         // formatting
```

## Utilities

```ts
import { intervalToDuration, formatDistanceToNow } from '@iguanads/tempo'

// Calculate duration between two dates
intervalToDuration({ start: '2024-01-01', end: '2024-06-01' })

// Format relative distance ("Now", "5 min ago", "10 Jan")
formatDistanceToNow(tempo('2024-01-15'))
```

## Commands

### Development

```bash
pnpm dev
```

### Build

```bash
pnpm build
```

### Lint

```bash
pnpm lint
```