# PettyUI Kitchen Sink Showcase

## Overview

A single-page component showcase app (`packages/showcase/`) that displays every PettyUI component grouped by category. Each component shows its name, description, and a live interactive demo. Built with Vite + SolidJS + Tailwind v4.

## Page Structure

Vertical scroll, sectioned by category. Sticky top bar with project title and TOC dropdown for jumping to categories. Smooth scroll behavior with scroll-margin offsets for anchor links.

### Sticky Header

- "PettyUI" branding left
- Category quick-links right (horizontal list on desktop, dropdown on mobile)

### Category Sections

Each section has:
- Category title (h2) with a horizontal rule
- Components listed vertically within the section

### Component Blocks

Each component block contains:
- Component name (h3)
- Description text (pulled from registry metadata)
- Demo area: bordered container with the live interactive demo inside

## Categories & Components (44 total)

### 1. Layout & Display (6)
- **Avatar** — image with fallback initials
- **Badge** — status indicator labels (info, success, warning, error variants)
- **Card** — header/content/footer container with sample content
- **Image** — image with fallback placeholder
- **Separator** — horizontal and vertical dividers
- **Skeleton** — loading placeholders in different shapes

### 2. Inputs & Forms (14)
- **Button** — primary, secondary, outline, ghost variants
- **TextField** — text input with label, placeholder, description, error state
- **NumberField** — numeric input with increment/decrement buttons
- **Checkbox** — checked, unchecked, indeterminate states
- **Switch** — on/off toggle
- **RadioGroup** — group of 3 radio options
- **Slider** — range slider with value display
- **Toggle** — pressed/unpressed states
- **ToggleGroup** — single and multi-select toggle groups
- **Select** — dropdown with grouped options
- **Combobox** — searchable select with filtering
- **Listbox** — inline selectable list
- **Form** — complete form with Zod validation, multiple field types, submit + error display
- **DatePicker** — date input with calendar dropdown

### 3. Navigation (8)
- **Link** — internal, external, disabled states
- **Breadcrumbs** — 3-level breadcrumb trail
- **Tabs** — 3 tabs with content panels
- **Accordion** — 3 collapsible sections
- **Collapsible** — single expand/collapse section
- **Pagination** — page navigation with ellipsis
- **NavigationMenu** — horizontal nav with dropdown submenus
- **Wizard** — 3-step wizard flow

### 4. Overlays (9)
- **Dialog** — modal with title, description, close
- **AlertDialog** — confirmation dialog with cancel/action
- **Drawer** — slide-in panel from right
- **Popover** — floating content panel with arrow
- **Tooltip** — hover tooltip on a button
- **HoverCard** — rich preview card on hover
- **DropdownMenu** — action menu with groups and separators
- **ContextMenu** — right-click context menu
- **CommandPalette** — search-driven command menu (opened via button)

### 5. Feedback & Status (4)
- **Alert** — info, success, warning, error variants
- **Toast** — button that triggers a temporary notification
- **Progress** — determinate progress bar at 60%
- **Meter** — value gauge indicator

### 6. Data (3)
- **Calendar** — month grid with selectable dates
- **DataTable** — sortable table with sample data rows
- **VirtualList** — virtualized list of 10,000 items

## Tech Stack

- **Package**: `packages/showcase/`
- **Build**: Vite + vite-plugin-solid
- **Styling**: Tailwind CSS v4
- **Imports**: Direct source imports via workspace path aliases (`pettyui/*` -> `../core/src/components/*/index.ts`)
- **Dev**: `pnpm dev` from showcase package

## File Structure

```
packages/showcase/
  package.json
  vite.config.ts
  tailwind.config.ts      (if needed for v4)
  index.html
  src/
    index.tsx              (mount point)
    app.tsx                (main page layout, sticky header, category sections)
    sections/
      layout-display.tsx   (Avatar, Badge, Card, Image, Separator, Skeleton)
      inputs-forms.tsx     (Button, TextField, NumberField, Checkbox, Switch, RadioGroup, Slider, Toggle, ToggleGroup, Select, Combobox, Listbox, Form, DatePicker)
      navigation.tsx       (Link, Breadcrumbs, Tabs, Accordion, Collapsible, Pagination, NavigationMenu, Wizard)
      overlays.tsx         (Dialog, AlertDialog, Drawer, Popover, Tooltip, HoverCard, DropdownMenu, ContextMenu, CommandPalette)
      feedback-status.tsx  (Alert, Toast, Progress, Meter)
      data.tsx             (Calendar, DataTable, VirtualList)
```

## Styling Approach

Components are headless — each demo applies Tailwind classes directly to the component parts to make them visible and interactive. Demos should look clean and professional but don't need to be production-grade designs. The goal is to show what each component does, not to be a design system showcase.

## Scroll Behavior

- `scroll-behavior: smooth` on html
- Each category section has an `id` for anchor linking
- `scroll-margin-top` on sections to offset the sticky header
- No sidebar — the sticky header contains the category links
