# @mks2508/mks-ui

UI component library built on Shadcn UI + Animate UI primitives with custom components, animated icons, and React hooks.

## Install

```bash
bun add @mks2508/mks-ui
```

Peer dependencies: `react >= 19.2.0`, `react-dom >= 19.2.0`

## Architecture

v0.2.0 uses a **framework-agnostic core + React namespace** architecture:

```
src/
├── core/           # Framework-agnostic types (StyleSlots, IBaseConfig)
├── react/          # All React code
│   ├── ui/         # 23 UI components (3-file structure)
│   ├── primitives/ # Slot, Highlight, AutoHeight, CountingNumber
│   ├── components/ # MorphingPopover (CSS modules)
│   ├── hooks/      # 4 hooks (Animation/, State/, DOM/)
│   ├── icons/      # 33 lucide-animated icons + HugeIcons
│   └── lib/        # cn(), getStrictContext()
├── index.ts        # Core entry point
└── index.css       # Global styles
```

Each UI component follows a 3-file structure:
- `index.tsx` — Component implementation + exports
- `{Name}.types.ts` — TypeScript interfaces (IPrefix convention)
- `{Name}.styles.ts` — StyleSlots + CVA variants

## Usage

```tsx
// React components, hooks, icons, utilities
import { Button, Card, Dialog, CornerBracket } from '@mks2508/mks-ui/react';
import { useAutoHeight, useControlledState } from '@mks2508/mks-ui/react';
import { cn } from '@mks2508/mks-ui/react';

// Core types (framework-agnostic)
import type { StyleSlots, SlotOverrides, IBaseConfig } from '@mks2508/mks-ui';
```

## Components

### Animate UI (animated)

| Component | Description |
|-----------|-------------|
| `Accordion` | Animated expand/collapse panels |
| `AlertDialog` | Animated alert dialog with backdrop |
| `Checkbox` | Animated checkbox with indicator |
| `Dialog` | Modal dialog with motion transitions |
| `Menu` | Context/trigger menu with highlight |
| `Popover` | Animated popover with arrow |
| `Progress` | Animated progress bar |
| `Switch` | Animated toggle switch |
| `Tabs` | Animated tabs with highlight |
| `Tooltip` | Animated tooltip with arrow |

### Primitives

| Component | Description |
|-----------|-------------|
| `AutoHeight` | Smooth height auto-resize animation |
| `CountingNumber` | Animated number interpolation |
| `Highlight` | Animated highlight effect |
| `Slot` | Motion-enhanced asChild composition |

### Shadcn base

| Component | Description |
|-----------|-------------|
| `Badge` | Status/label badges |
| `Button` | Button with variants and sizes |
| `Card` | Container card |
| `Combobox` | Searchable select |
| `DropdownMenu` | Dropdown menu (Shadcn API) |
| `Field` | Form field wrapper |
| `Input` | Text input |
| `InputGroup` | Grouped input with addons |
| `Label` | Form label |
| `Select` | Select dropdown |
| `Separator` | Visual divider |
| `Textarea` | Multi-line text input |

### Custom

| Component | Description |
|-----------|-------------|
| `CornerBracket` | Corner bracket decoration (tl/tr/bl/br) |
| `MorphingPopover` | Morphing transition popover |

## Icons

33 animated Lucide icons + HugeIcons namespace.

```tsx
import { Check, Search, Terminal } from '@mks2508/mks-ui/react';
import { HugeIcons } from '@mks2508/mks-ui/react';
```

## Hooks

| Hook | Description |
|------|-------------|
| `useAutoHeight` | Auto-resizing height |
| `useControlledState` | Controlled/uncontrolled state |
| `useDataState` | Data loading state |
| `useIsInView` | Intersection Observer |

## Sub-path imports

```tsx
import { Button } from '@mks2508/mks-ui/react/ui/Button';
import { Check } from '@mks2508/mks-ui/react/icons/lucide-animated/check';
import { cn } from '@mks2508/mks-ui/react/lib/utils';
```

## Development

```bash
bun run dev        # Vite dev server
bun run build      # Production build (Rolldown + tsc + tsc-alias)
bun run typecheck  # Type check
bun run lint       # ESLint
bun run format     # Prettier
```

## License

MIT