# PettyUI

51 headless Web Components. Zero dependencies. ~5KB gzipped.

Built on browser-native APIs — Popover, `<dialog>`, Navigation API, View Transitions. No framework required. Works everywhere.

## Install

```bash
npm install pettyui
```

## Usage

Import what you need. Each component registers itself as a Custom Element.

```html
<script type="module">
  import "pettyui/dialog";
  import "pettyui/select";
  import "pettyui/tabs";
</script>

<petty-dialog>
  <button commandfor="my-dlg" command="show-modal" type="button">Open</button>
  <dialog id="my-dlg">
    <h2>Hello</h2>
    <p>This is a native dialog with ARIA linking, focus trap, and Escape — all from the browser.</p>
    <button commandfor="my-dlg" command="close" type="button">Close</button>
  </dialog>
</petty-dialog>
```

## Components

**Inputs** — Button, TextField, NumberField, Checkbox, Switch, RadioGroup, Slider, Toggle, ToggleGroup, Select, Combobox, Listbox, TagsInput, Form, DatePicker

**Navigation** — Link, Breadcrumbs, Tabs, Accordion, Collapsible, Pagination, NavigationMenu, Wizard

**Overlays** — Dialog, AlertDialog, Drawer, Popover, Tooltip, HoverCard, DropdownMenu, ContextMenu, CommandPalette

**Feedback** — Alert, Toast, Progress, Meter, LoadingIndicator

**Layout** — Avatar, Badge, Card, Image, Separator, Skeleton

**Data** — Calendar, DataTable, VirtualList

**Animation** — Typewriter, Counter, Stagger, Reveal, Parallax

## Why

- **Zero runtime** — 500-byte signals core. No virtual DOM, no framework overhead.
- **Browser-native** — Popover API for overlays, `<dialog>` for modals, Navigation API for routing. No polyfills.
- **No Shadow DOM** — Style with plain CSS, Tailwind, or anything. No `::part()` needed.
- **AI-native** — Zod schemas for every component. MCP tools for agent integration.
- **Works everywhere** — React, Vue, Svelte, Astro, plain HTML. It's just Custom Elements.

## Styling

PettyUI is headless. Components use `data-state` and `data-part` attributes for styling hooks.

```css
petty-tab[data-state="active"] {
  border-bottom: 2px solid blue;
}

petty-switch[data-state="on"] [data-part="thumb"] {
  transform: translateX(18px);
}
```

Optional default theme and animations:

```js
import "pettyui/theme";
import "pettyui/animations";
```

## Signals

Built-in reactivity in ~30 lines (~500 bytes):

```js
import { signal, effect } from "pettyui/signals";

const count = signal(0);
effect(() => console.log(count.get()));
count.set(1); // logs 1
```

## Router

SPA routing with the Navigation API (~15 lines):

```js
import { initRouter } from "pettyui/router";
initRouter();
```

```html
<a href="/about">About</a>
<main data-petty-outlet><!-- content swaps here --></main>
```

## License

MIT