npm package: @publikit/base
Description: Simple, reusable UI components - A lightweight component library with shadcn/ui primitives, navigation items, badges, and utilities
Author: Pirimera
Latest version: 0.1.1

# @publikit/base

[![npm version](https://img.shields.io/npm/v/@publikit/base.svg)](https://www.npmjs.com/package/@publikit/base)
[![npm license](https://img.shields.io/npm/l/@publikit/base.svg)](https://www.npmjs.com/package/@publikit/base)

Simple, reusable UI components — a lightweight component library with shadcn/ui primitives, custom navigation items, badges, and utilities.

- **React 18+** · **Node 18+** · **TypeScript** · **Tailwind CSS**
- ESM + CJS builds; tree-shakeable; peer deps for React/tailwind to avoid duplication.

## Features

- **Simple & Lightweight** - Minimal dependencies, focused components
- **Package-Ready** - Designed for easy extraction and reuse
- **Accessible** - Built with accessibility in mind
- **Type-Safe** - Full TypeScript support with exported types
- **Flexible** - Customizable via props and className
- **Tree-Shakeable** - Only import what you use

## Installation

```bash
npm install @publikit/base
```

### Required Peer Dependencies

```bash
npm install react react-dom lucide-react tailwindcss
```

### Optional Peer Dependencies

```bash
# For Form components
npm install react-hook-form

# For Chart components
npm install recharts

# For Sonner toaster
npm install next-themes
```

### Import style

Use **named imports** so bundlers can tree-shake unused code. Prefer:

```tsx
import { Button, Badge, cn } from '@publikit/base';
```

Avoid importing the whole package if you only need a few exports:

```tsx
import * as Base from '@publikit/base'; // may pull the entire package
```

## Custom Components

### ScrollButton

A simple, accessible button component for scroll navigation with up/down directions.

```tsx
import { ScrollButton } from '@publikit/base';

<ScrollButton direction="up" onClick={scrollUp} visible={canScrollUp} />
<ScrollButton direction="down" onClick={scrollDown} visible={canScrollDown} />
```

### NavItem

A flexible navigation item component with icon, label, and optional badge. Supports both vertical and horizontal layouts. Works with or without routing libraries via adapters.

```tsx
import { NavItem } from '@publikit/base';
import { Home } from 'lucide-react';

// Basic usage
<NavItem
  item={{ name: 'Home', href: '/', icon: Home, badge: null }}
  isActive={true}
/>

// With routing adapter (react-router-dom)
import { NavLink, useMatch } from 'react-router-dom';

<NavItem
  item={{ name: 'Feed', href: '/feed', icon: Rss, badge: 12 }}
  routingAdapter={{ Link: NavLink, useMatch }}
/>
```

### Badge

A flexible badge component for displaying counts, status, or labels. Supports number formatting (99+), absolute positioning, and various sizes.

```tsx
import { Badge } from '@publikit/base';

<Badge value={5} variant="count" />
<Badge value={100} variant="count" /> // Displays "99+"

// Absolute positioned (for icon overlays)
<div className="relative">
  <Icon />
  <Badge value={12} position="top-right" />
</div>
```

## Shadcn/UI Components

All standard shadcn/ui components are included and exported:

`Accordion`, `Alert`, `AlertDialog`, `AspectRatio`, `Avatar`, `Breadcrumb`, `Button`, `Calendar`, `Card`, `Carousel`, `Chart`, `Checkbox`, `Collapsible`, `Command`, `ContextMenu`, `Dialog`, `Drawer`, `DropdownMenu`, `Form`, `HoverCard`, `Input`, `InputOTP`, `Label`, `Menubar`, `NavigationMenu`, `Pagination`, `Popover`, `Progress`, `RadioGroup`, `Resizable`, `ScrollArea`, `Select`, `Separator`, `Sheet`, `Sidebar`, `Skeleton`, `Slider`, `Switch`, `Table`, `Tabs`, `Textarea`, `Toast`, `Toaster`, `Toggle`, `ToggleGroup`, `Tooltip`

```tsx
import { Button, Dialog, DialogContent, DialogTrigger, Input, cn } from '@publikit/base';
```

> **Note:** The shadcn Badge is exported as `ShadcnBadge` to avoid conflict with the custom `Badge` component. The Sonner toaster is exported as `SonnerToaster`.

## Hooks

```tsx
import { useIsMobile, useToast, toast } from '@publikit/base';
```

## Utilities

```tsx
import { cn } from '@publikit/base';

<div className={cn('base-class', condition && 'conditional-class', className)} />
```

## API Reference

See the TypeScript types for full API documentation. All types and interfaces are exported.

## Publishing (maintainers)

From this package directory:

```bash
npm run clean
npm run build
npm run typecheck
npm publish
```

Scoped package is published with `"access": "public"`. See [CHANGELOG.md](./CHANGELOG.md) for version history.

## License

MIT