# Kitchen Sink Showcase Implementation Plan > **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking. **Goal:** Build a single-page showcase app at `packages/showcase/` that displays every PettyUI component grouped by category with live interactive demos. **Architecture:** Vite + SolidJS + Tailwind v4 app. Single scrollable page with sticky header + category anchors. Six section files (one per category), each rendering component demos. A shared `ComponentDemo` wrapper provides consistent title/description/demo-area layout. **Tech Stack:** Vite, vite-plugin-solid, @tailwindcss/vite, SolidJS, PettyUI core (workspace import) --- ## File Structure ``` packages/showcase/ package.json — deps + scripts tsconfig.json — extends base, paths for pettyui/* vite.config.ts — solid + tailwind plugins, resolve aliases index.html — entry HTML src/ index.tsx — render mount app.tsx — page shell: sticky header, TOC, section slots app.css — tailwind import + global styles component-demo.tsx — shared wrapper: name, description, demo area sections/ layout-display.tsx — Avatar, Badge, Card, Image, Separator, Skeleton inputs-basic.tsx — Button, TextField, NumberField, Checkbox, Switch, Toggle inputs-selection.tsx — RadioGroup, ToggleGroup, Select, Combobox, Listbox, Slider inputs-advanced.tsx — 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 ``` The inputs category is split into 3 files to stay under the 500-line file limit. --- ### Task 1: Scaffold the showcase package **Files:** - Create: `packages/showcase/package.json` - Create: `packages/showcase/tsconfig.json` - Create: `packages/showcase/vite.config.ts` - Create: `packages/showcase/index.html` - Create: `packages/showcase/src/app.css` - Create: `packages/showcase/src/index.tsx` - [ ] **Step 1: Create package.json** ```json { "name": "pettyui-showcase", "version": "0.0.1", "private": true, "type": "module", "scripts": { "dev": "vite", "build": "vite build", "preview": "vite preview" }, "dependencies": { "pettyui": "workspace:*", "solid-js": "^1.9.12" }, "devDependencies": { "@tailwindcss/vite": "^4.1.3", "tailwindcss": "^4.1.3", "vite": "^8.0.3", "vite-plugin-solid": "^2.11.11" } } ``` - [ ] **Step 2: Create tsconfig.json** ```json { "extends": "../../tsconfig.base.json", "compilerOptions": { "rootDir": "src", "outDir": "dist", "baseUrl": ".", "paths": { "pettyui/*": ["../core/src/components/*/index.ts"] } }, "include": ["src"] } ``` - [ ] **Step 3: Create vite.config.ts** ```ts import { defineConfig } from "vite"; import solid from "vite-plugin-solid"; import tailwindcss from "@tailwindcss/vite"; import path from "node:path"; export default defineConfig({ plugins: [solid(), tailwindcss()], resolve: { conditions: ["solid", "browser", "module", "import"], alias: { "pettyui": path.resolve(__dirname, "../core/src/components"), }, }, }); ``` - [ ] **Step 4: Create index.html** ```html PettyUI — Kitchen Sink

``` - [ ] **Step 5: Create src/app.css** ```css @import "tailwindcss"; html { scroll-behavior: smooth; } ``` - [ ] **Step 6: Create src/index.tsx** ```tsx import { render } from "solid-js/web"; import { App } from "./app"; import "./app.css"; const root = document.getElementById("root"); if (root) { render(() => , root); } ``` - [ ] **Step 7: Install dependencies** Run: `cd packages/showcase && pnpm install` Expected: dependencies install, node_modules created - [ ] **Step 8: Verify dev server starts** Run: `cd packages/showcase && pnpm dev` Expected: Vite dev server starts, blank page loads at localhost - [ ] **Step 9: Commit** ```bash git add packages/showcase/package.json packages/showcase/tsconfig.json packages/showcase/vite.config.ts packages/showcase/index.html packages/showcase/src/app.css packages/showcase/src/index.tsx git commit -m "feat(showcase): scaffold Vite + SolidJS + Tailwind v4 app" ``` --- ### Task 2: App shell with sticky header and TOC **Files:** - Create: `packages/showcase/src/app.tsx` - Create: `packages/showcase/src/component-demo.tsx` - [ ] **Step 1: Create component-demo.tsx** Shared wrapper that renders a component name, description, and bordered demo area. ```tsx import type { JSX } from "solid-js"; interface ComponentDemoProps { name: string; description: string; children: JSX.Element; } /** Renders a titled component demo block with description and bordered demo area. */ export function ComponentDemo(props: ComponentDemoProps) { return (

{props.name}

{props.description}

{props.children}

); } ``` - [ ] **Step 2: Create app.tsx** Main page layout with sticky header, category navigation, and placeholder section slots. ```tsx import type { JSX } from "solid-js"; const categories = [ { id: "layout-display", label: "Layout & Display" }, { id: "inputs-basic", label: "Inputs: Basic" }, { id: "inputs-selection", label: "Inputs: Selection" }, { id: "inputs-advanced", label: "Inputs: Advanced" }, { id: "navigation", label: "Navigation" }, { id: "overlays", label: "Overlays" }, { id: "feedback-status", label: "Feedback & Status" }, { id: "data", label: "Data" }, ] as const; /** Section wrapper with category heading and anchor target. */ function Section(props: { id: string; title: string; children: JSX.Element }) { return (

{props.title}

{props.children}

); } /** Kitchen sink showcase page with all PettyUI components. */ export function App() { return (

PettyUI Kitchen Sink

Coming soon...

); } ``` - [ ] **Step 3: Verify app shell renders** Run: `cd packages/showcase && pnpm dev` Expected: Page shows sticky header with "PettyUI Kitchen Sink", category nav links, and 8 placeholder sections. Clicking a nav link smooth-scrolls to the section. - [ ] **Step 4: Commit** ```bash git add packages/showcase/src/app.tsx packages/showcase/src/component-demo.tsx git commit -m "feat(showcase): add app shell with sticky header and category sections" ``` --- ### Task 3: Layout & Display section **Files:** - Create: `packages/showcase/src/sections/layout-display.tsx` - Modify: `packages/showcase/src/app.tsx` — replace placeholder with `` **Component exports used:** - `Avatar` from `pettyui/avatar` — compound: `Avatar`, `Avatar.Image`, `Avatar.Fallback` - `Badge` from `pettyui/badge` — simple: `Badge` - `Card` from `pettyui/card` — compound: `Card`, `Card.Header`, `Card.Title`, `Card.Description`, `Card.Content`, `Card.Footer` - `Image` from `pettyui/image` — compound: `Image`, `Image.Img`, `Image.Fallback` - `Separator` from `pettyui/separator` — simple: `Separator` - `Skeleton` from `pettyui/skeleton` — simple: `Skeleton` - [ ] **Step 1: Create layout-display.tsx** ```tsx import { Avatar } from "pettyui/avatar"; import { Badge } from "pettyui/badge"; import { Card } from "pettyui/card"; import { Image } from "pettyui/image"; import { Separator } from "pettyui/separator"; import { Skeleton } from "pettyui/skeleton"; import { ComponentDemo } from "../component-demo"; /** Avatar demo with image and fallback variants. */ function AvatarDemo() { return (

MB JD

); } /** Badge demo with multiple variants. */ function BadgeDemo() { return (

Default Info Success Warning Error

); } /** Card demo with header, content, and footer. */ function CardDemo() { return ( Card Title A short description of this card.

Card body content goes here. This could be anything.

); } /** Image demo with working image and fallback. */ function ImageDemo() { return (

Loading... No image

); } /** Separator demo with horizontal and vertical. */ function SeparatorDemo() { return (

Above the separator

Below the separator

); } /** Skeleton demo with different shapes. */ function SkeletonDemo() { return (

); } /** Layout & Display section with all display components. */ export function LayoutDisplaySection() { return ( <> ); } ``` - [ ] **Step 2: Wire into app.tsx** Replace the layout-display placeholder in `app.tsx`: Add import at top: ```tsx import { LayoutDisplaySection } from "./sections/layout-display"; ``` Replace: ```tsx

Coming soon...

``` With: ```tsx

``` - [ ] **Step 3: Verify in browser** Run: `cd packages/showcase && pnpm dev` Expected: Layout & Display section shows 6 component demos with titles, descriptions, and interactive content. - [ ] **Step 4: Commit** ```bash git add packages/showcase/src/sections/layout-display.tsx packages/showcase/src/app.tsx git commit -m "feat(showcase): add Layout & Display section demos" ``` --- ### Task 4: Inputs Basic section **Files:** - Create: `packages/showcase/src/sections/inputs-basic.tsx` - Modify: `packages/showcase/src/app.tsx` — replace placeholder with `` **Component exports used:** - `Button` from `pettyui/button` — simple: `Button` - `TextField` from `pettyui/text-field` — compound: `TextField`, `TextField.Label`, `TextField.Input`, `TextField.Description`, `TextField.ErrorMessage` - `NumberField` from `pettyui/number-field` — compound: `NumberField`, `NumberField.Label`, `NumberField.Input`, `NumberField.IncrementTrigger`, `NumberField.DecrementTrigger` - `Checkbox` from `pettyui/checkbox` — simple: `Checkbox` - `Switch` from `pettyui/switch` — simple: `Switch` - `Toggle` from `pettyui/toggle` — simple: `Toggle` - [ ] **Step 1: Create inputs-basic.tsx** ```tsx import { createSignal } from "solid-js"; import { Button } from "pettyui/button"; import { TextField } from "pettyui/text-field"; import { NumberField } from "pettyui/number-field"; import { Checkbox } from "pettyui/checkbox"; import { Switch } from "pettyui/switch"; import { Toggle } from "pettyui/toggle"; import { ComponentDemo } from "../component-demo"; /** Button demo with multiple variants. */ function ButtonDemo() { return (

); } /** TextField demo with label, description, and error. */ function TextFieldDemo() { return (

Name Your full name Email Invalid email address

); } /** NumberField demo with increment/decrement. */ function NumberFieldDemo() { return ( Quantity

- +

); } /** Checkbox demo with checked and unchecked states. */ function CheckboxDemo() { return (

{(state) => ( <>

{state.checked() ? "✓" : ""}

Accept terms and conditions )} {(state) => ( <>

{state.checked() ? "✓" : ""}

Subscribe to newsletter )}

); } /** Switch demo with on/off toggle. */ function SwitchDemo() { const [checked, setChecked] = createSignal(false); return ( {(state) => ( <>

{state.checked() ? "On" : "Off"} )} ); } /** Toggle demo with pressed/unpressed. */ function ToggleDemo() { return ( Bold ); } /** Inputs: Basic section with fundamental input components. */ export function InputsBasicSection() { return ( <> ); } ``` - [ ] **Step 2: Wire into app.tsx** Add import: ```tsx import { InputsBasicSection } from "./sections/inputs-basic"; ``` Replace inputs-basic placeholder: ```tsx

``` - [ ] **Step 3: Verify in browser** Expected: 6 input component demos render with working interactivity (checkbox toggles, switch slides, toggle presses). - [ ] **Step 4: Commit** ```bash git add packages/showcase/src/sections/inputs-basic.tsx packages/showcase/src/app.tsx git commit -m "feat(showcase): add Inputs Basic section demos" ``` --- ### Task 5: Inputs Selection section **Files:** - Create: `packages/showcase/src/sections/inputs-selection.tsx` - Modify: `packages/showcase/src/app.tsx` — replace placeholder with `` **Component exports used:** - `RadioGroup` from `pettyui/radio-group` — compound: `RadioGroup`, `RadioGroup.Item` - `ToggleGroup` from `pettyui/toggle-group` — compound: `ToggleGroup`, `ToggleGroup.Item` - `Select, SelectRoot, SelectTrigger, SelectValue, SelectContent, SelectItem` from `pettyui/select` — named exports - `Combobox, ComboboxRoot, ComboboxInput, ComboboxTrigger, ComboboxContent, ComboboxItem` from `pettyui/combobox` — named exports - `Listbox` from `pettyui/listbox` — compound: `Listbox`, `Listbox.Item` - `Slider` from `pettyui/slider` — compound: `Slider`, `Slider.Track`, `Slider.Range`, `Slider.Thumb` - [ ] **Step 1: Create inputs-selection.tsx** ```tsx import { createSignal, For } from "solid-js"; import { RadioGroup } from "pettyui/radio-group"; import { ToggleGroup } from "pettyui/toggle-group"; import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from "pettyui/select"; import { Combobox, ComboboxInput, ComboboxTrigger, ComboboxContent, ComboboxItem } from "pettyui/combobox"; import { Listbox } from "pettyui/listbox"; import { Slider } from "pettyui/slider"; import { ComponentDemo } from "../component-demo"; const fruits = ["Apple", "Banana", "Cherry", "Date", "Elderberry"]; /** RadioGroup demo with 3 options. */ function RadioGroupDemo() { return ( {(state) => ( {(value) => ( {(itemState) => ( <>

{itemState.checked() &&

}

Option {value.split("-")[1]?.toUpperCase()} )} )} )} ); } /** ToggleGroup demo with single selection. */ function ToggleGroupDemo() { return ( Left Center Right ); } /** Select demo with fruit options. */ function SelectDemo() { return ( ); } /** Combobox demo with searchable fruit list. */ function ComboboxDemo() { return (

▾

{(fruit) => ( {fruit} )} ); } /** Listbox demo with inline selectable list. */ function ListboxDemo() { return ( {(fruit) => ( {fruit} )} ); } /** Slider demo with value display. */ function SliderDemo() { const [value, setValue] = createSignal(40); return (

Volume {value()}%

); } /** Inputs: Selection section with choice/range components. */ export function InputsSelectionSection() { return ( <> ); } ``` - [ ] **Step 2: Wire into app.tsx** Add import: ```tsx import { InputsSelectionSection } from "./sections/inputs-selection"; ``` Replace inputs-selection placeholder: ```tsx

``` - [ ] **Step 3: Verify in browser** Expected: 6 selection components render. Radio buttons toggle, select opens a dropdown, combobox filters on type, slider drags. - [ ] **Step 4: Commit** ```bash git add packages/showcase/src/sections/inputs-selection.tsx packages/showcase/src/app.tsx git commit -m "feat(showcase): add Inputs Selection section demos" ``` --- ### Task 6: Inputs Advanced section **Files:** - Create: `packages/showcase/src/sections/inputs-advanced.tsx` - Modify: `packages/showcase/src/app.tsx` — replace placeholder with `` **Component exports used:** - `Form` from `pettyui/form` — compound: `Form`, `Form.Field`, `Form.Label`, `Form.Control`, `Form.Description`, `Form.ErrorMessage`, `Form.Submit` - `DatePicker` from `pettyui/date-picker` — compound: `DatePicker`, `DatePicker.Input`, `DatePicker.Trigger`, `DatePicker.Content` - [ ] **Step 1: Create inputs-advanced.tsx** ```tsx import { Form } from "pettyui/form"; import { DatePicker } from "pettyui/date-picker"; import { ComponentDemo } from "../component-demo"; /** Form demo with validation and error display. */ function FormDemo() { return ( ); } /** DatePicker demo with calendar dropdown. */ function DatePickerDemo() { return (

📅

); } /** Inputs: Advanced section with complex input components. */ export function InputsAdvancedSection() { return ( <> ); } ``` - [ ] **Step 2: Wire into app.tsx** Add import: ```tsx import { InputsAdvancedSection } from "./sections/inputs-advanced"; ``` Replace inputs-advanced placeholder: ```tsx

``` - [ ] **Step 3: Verify in browser** Expected: Form renders with name/email fields and submit button. DatePicker shows input with calendar trigger. - [ ] **Step 4: Commit** ```bash git add packages/showcase/src/sections/inputs-advanced.tsx packages/showcase/src/app.tsx git commit -m "feat(showcase): add Inputs Advanced section demos" ``` --- ### Task 7: Navigation section **Files:** - Create: `packages/showcase/src/sections/navigation.tsx` - Modify: `packages/showcase/src/app.tsx` — replace placeholder with `` **Component exports used:** - `Link` from `pettyui/link` — simple: `Link` - `Breadcrumbs` from `pettyui/breadcrumbs` — compound: `Breadcrumbs`, `Breadcrumbs.Item`, `Breadcrumbs.Link`, `Breadcrumbs.Separator` - `Tabs` from `pettyui/tabs` — compound: `Tabs`, `Tabs.List`, `Tabs.Tab`, `Tabs.Panel` - `Accordion` from `pettyui/accordion` — compound: `Accordion`, `Accordion.Item`, `Accordion.Header`, `Accordion.Trigger`, `Accordion.Content` - `Collapsible` from `pettyui/collapsible` — compound: `Collapsible`, `Collapsible.Trigger`, `Collapsible.Content` - `Pagination` from `pettyui/pagination` — simple: `Pagination` - `NavigationMenu` from `pettyui/navigation-menu` — compound: `NavigationMenu`, `NavigationMenu.List`, `NavigationMenu.Item`, `NavigationMenu.Trigger`, `NavigationMenu.Content`, `NavigationMenu.Link` - `Wizard` from `pettyui/wizard` — compound: `Wizard`, `Wizard.StepList`, `Wizard.Step`, `Wizard.StepTrigger`, `Wizard.StepContent`, `Wizard.Prev`, `Wizard.Next` - [ ] **Step 1: Create navigation.tsx** ```tsx import { For } from "solid-js"; import { Link } from "pettyui/link"; import { Breadcrumbs } from "pettyui/breadcrumbs"; import { Tabs } from "pettyui/tabs"; import { Accordion } from "pettyui/accordion"; import { Collapsible } from "pettyui/collapsible"; import { Pagination } from "pettyui/pagination"; import { NavigationMenu } from "pettyui/navigation-menu"; import { Wizard } from "pettyui/wizard"; import { ComponentDemo } from "../component-demo"; /** Link demo with variants. */ function LinkDemo() { return (

Internal link External link ↗ Disabled link

); } /** Breadcrumbs demo with 3 levels. */ function BreadcrumbsDemo() { return ( Home / Components / Breadcrumbs ); } /** Tabs demo with 3 panels. */ function TabsDemo() { return ( Account Password Settings Account settings content Password settings content General settings content ); } /** Accordion demo with 3 sections. */ function AccordionDemo() { const items = [ { value: "item-1", title: "What is PettyUI?", content: "A headless SolidJS component library." }, { value: "item-2", title: "Is it accessible?", content: "Yes, all components follow WAI-ARIA patterns." }, { value: "item-3", title: "Can I style it?", content: "Absolutely. It's headless — bring your own styles." }, ]; return ( {(item) => ( {item.title} ▾ {item.content} )} ); } /** Collapsible demo with expand/collapse. */ function CollapsibleDemo() { return ( ▶ Show more details Here are the additional details that were hidden. Click again to collapse. ); } /** Pagination demo. */ function PaginationDemo() { return ( ); } /** NavigationMenu demo with dropdown. */ function NavigationMenuDemo() { return ( Home Products ▾ Widget A Widget B About ); } /** Wizard demo with 3 steps. */ function WizardDemo() { return ( {(label, i) => ( {i() + 1} {label} )} Step 1: Enter your details here. Step 2: Review your information. Step 3: Confirm and submit.

Previous Next

); } /** Navigation section with all navigation components. */ export function NavigationSection() { return ( <> ); } ``` - [ ] **Step 2: Wire into app.tsx** Add import: ```tsx import { NavigationSection } from "./sections/navigation"; ``` Replace navigation placeholder: ```tsx ``` - [ ] **Step 3: Verify in browser** Expected: 8 navigation component demos. Tabs switch panels, accordion expands/collapses, wizard steps through. - [ ] **Step 4: Commit** ```bash git add packages/showcase/src/sections/navigation.tsx packages/showcase/src/app.tsx git commit -m "feat(showcase): add Navigation section demos" ``` --- ### Task 8: Overlays section **Files:** - Create: `packages/showcase/src/sections/overlays.tsx` - Modify: `packages/showcase/src/app.tsx` — replace placeholder with `` **Component exports used:** - `Dialog` from `pettyui/dialog` — compound - `AlertDialog` from `pettyui/alert-dialog` — compound - `Drawer` from `pettyui/drawer` — compound - `Popover` from `pettyui/popover` — compound - `Tooltip, TooltipRoot, TooltipTrigger, TooltipContent` from `pettyui/tooltip` — named exports - `HoverCard, HoverCardRoot, HoverCardTrigger, HoverCardContent` from `pettyui/hover-card` — named exports - `DropdownMenu, DropdownMenuRoot, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator` from `pettyui/dropdown-menu` — named exports - `ContextMenu, ContextMenuRoot, ContextMenuTrigger, ContextMenuContent, ContextMenuItem` from `pettyui/context-menu` — named exports - `CommandPalette` from `pettyui/command-palette` — compound - [ ] **Step 1: Create overlays.tsx** ```tsx import { createSignal } from "solid-js"; import { Dialog } from "pettyui/dialog"; import { AlertDialog } from "pettyui/alert-dialog"; import { Drawer } from "pettyui/drawer"; import { Popover } from "pettyui/popover"; import { TooltipRoot, TooltipTrigger, TooltipContent } from "pettyui/tooltip"; import { HoverCardRoot, HoverCardTrigger, HoverCardContent } from "pettyui/hover-card"; import { DropdownMenuRoot, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator } from "pettyui/dropdown-menu"; import { ContextMenuRoot, ContextMenuTrigger, ContextMenuContent, ContextMenuItem } from "pettyui/context-menu"; import { CommandPalette } from "pettyui/command-palette"; import { ComponentDemo } from "../component-demo"; const triggerBtn = "px-3 py-1.5 text-sm font-medium rounded border border-gray-300 hover:bg-gray-50"; const overlayBg = "fixed inset-0 bg-black/40 z-40"; const panelBase = "bg-white rounded-lg shadow-xl p-6 z-50"; /** Dialog demo with trigger. */ function DialogDemo() { return ( ); } /** AlertDialog demo with confirm/cancel. */ function AlertDialogDemo() { return ( Delete Item Are you sure? This action cannot be undone.

Cancel Delete

); } /** Drawer demo sliding from right. */ function DrawerDemo() { return ( Open Drawer Drawer Panel This drawer slides in from the right. Close ); } /** Popover demo with floating content. */ function PopoverDemo() { return ( Toggle Popover

This is a popover with interactive content.

Dismiss ); } /** Tooltip demo on hover. */ function TooltipDemo() { return ( Hover me This is a tooltip ); } /** HoverCard demo with rich preview. */ function HoverCardDemo() { return ( @pettyui

PettyUI

AI-native headless UI for SolidJS. 44 components.

); } /** DropdownMenu demo with grouped actions. */ function DropdownMenuDemo() { return ( Actions ▾ Edit Duplicate Delete ); } /** ContextMenu demo with right-click area. */ function ContextMenuDemo() { return ( Right-click here Copy Paste Inspect ); } /** CommandPalette demo with searchable commands. */ function CommandPaletteDemo() { const [open, setOpen] = createSignal(false); return (

New File Open File Save No results found

); } /** Overlays section with all overlay/modal components. */ export function OverlaysSection() { return ( <> ); } ``` - [ ] **Step 2: Wire into app.tsx** Add import: ```tsx import { OverlaysSection } from "./sections/overlays"; ``` Replace overlays placeholder: ```tsx

``` - [ ] **Step 3: Verify in browser** Expected: 9 overlay component demos. Dialog opens/closes, alert dialog shows confirm prompt, drawer slides in, popover floats, tooltip shows on hover, dropdown menu opens, right-click shows context menu, command palette opens. - [ ] **Step 4: Commit** ```bash git add packages/showcase/src/sections/overlays.tsx packages/showcase/src/app.tsx git commit -m "feat(showcase): add Overlays section demos" ``` --- ### Task 9: Feedback & Status section **Files:** - Create: `packages/showcase/src/sections/feedback-status.tsx` - Modify: `packages/showcase/src/app.tsx` — replace placeholder with `` **Component exports used:** - `Alert` from `pettyui/alert` — simple: `Alert` (with `.Title`, `.Description` accessed via dot syntax from the Alert export) - `Toast, toast` from `pettyui/toast` — `Toast.Region` compound, `toast()` imperative API - `Progress` from `pettyui/progress` — simple: `Progress` - `Meter` from `pettyui/meter` — simple: `Meter` - [ ] **Step 1: Check Alert export pattern** Read `packages/core/src/components/alert/alert.tsx` to verify if Alert has compound sub-components or is a flat component. - [ ] **Step 2: Create feedback-status.tsx** ```tsx import { Alert } from "pettyui/alert"; import { Toast, toast } from "pettyui/toast"; import { Progress } from "pettyui/progress"; import { Meter } from "pettyui/meter"; import { ComponentDemo } from "../component-demo"; /** Alert demo with multiple variants. */ function AlertDemo() { return (

Info This is an informational alert. Success Operation completed successfully. Error Something went wrong.

); } /** Toast demo with trigger button. */ function ToastDemo() { return (

{(toastData) => (

{toastData.title}

{toastData.description &&

{toastData.description}

}

)}

); } /** Progress demo at 60%. */ function ProgressDemo() { return (

Uploading... 60%

{(state) => (

)}

); } /** Meter demo with value gauge. */ function MeterDemo() { return (

Disk Usage 75%

{(state) => (

)}

); } /** Feedback & Status section with notification and indicator components. */ export function FeedbackStatusSection() { return ( <> ); } ``` - [ ] **Step 3: Wire into app.tsx** Add import: ```tsx import { FeedbackStatusSection } from "./sections/feedback-status"; ``` Replace feedback-status placeholder: ```tsx

``` - [ ] **Step 4: Verify in browser** Expected: Alert variants display, toast buttons trigger temporary notifications, progress bar at 60%, meter at 75%. - [ ] **Step 5: Commit** ```bash git add packages/showcase/src/sections/feedback-status.tsx packages/showcase/src/app.tsx git commit -m "feat(showcase): add Feedback & Status section demos" ``` --- ### Task 10: Data section **Files:** - Create: `packages/showcase/src/sections/data.tsx` - Modify: `packages/showcase/src/app.tsx` — replace placeholder with `` **Component exports used:** - `Calendar` from `pettyui/calendar` — compound: `Calendar`, `Calendar.Header`, `Calendar.Heading`, `Calendar.Nav`, `Calendar.PrevButton`, `Calendar.NextButton`, `Calendar.Grid`, `Calendar.GridHead`, `Calendar.GridBody`, `Calendar.Cell` - `DataTable, DataTableRoot` from `pettyui/data-table` — named export - `VirtualList` from `pettyui/virtual-list` — compound with empty sub-object - [ ] **Step 1: Create data.tsx** ```tsx import { For } from "solid-js"; import { Calendar } from "pettyui/calendar"; import { DataTable } from "pettyui/data-table"; import { VirtualList } from "pettyui/virtual-list"; import { ComponentDemo } from "../component-demo"; /** Calendar demo with month grid. */ function CalendarDemo() { return ( ‹ › {(day) => ( )} ); } const sampleData = [ { id: 1, name: "Alice Johnson", role: "Engineer", status: "Active" }, { id: 2, name: "Bob Smith", role: "Designer", status: "Active" }, { id: 3, name: "Carol Williams", role: "PM", status: "Inactive" }, { id: 4, name: "David Brown", role: "Engineer", status: "Active" }, { id: 5, name: "Eve Davis", role: "QA", status: "Active" }, ]; /** DataTable demo with sortable columns. */ function DataTableDemo() { return ( {(table) => ( {(header) => ( )} {(row) => ( {(cell) => ( )} )}

{header.label}
{cell.value}

)} ); } const virtualItems = Array.from({ length: 10000 }, (_, i) => `Item ${i + 1}`); /** VirtualList demo with 10k items. */ function VirtualListDemo() { return ( {(item) => (

{item}

)} ); } /** Data section with data display components. */ export function DataSection() { return ( <> ); } ``` - [ ] **Step 2: Wire into app.tsx** Add import: ```tsx import { DataSection } from "./sections/data"; ``` Replace data placeholder: ```tsx

``` - [ ] **Step 3: Verify in browser** Expected: Calendar shows month grid with selectable dates, data table shows 5 rows with headers, virtual list scrolls smoothly through 10k items. - [ ] **Step 4: Commit** ```bash git add packages/showcase/src/sections/data.tsx packages/showcase/src/app.tsx git commit -m "feat(showcase): add Data section demos" ``` --- ### Task 11: Final integration and polish **Files:** - Modify: `packages/showcase/src/app.tsx` — verify all imports are wired - No new files - [ ] **Step 1: Verify all 8 sections render** Run: `cd packages/showcase && pnpm dev` Scroll through the entire page and verify: - Sticky header stays at top with working category nav links - Smooth scroll to each section on nav click - All 44 components have visible, interactive demos - No console errors - [ ] **Step 2: Fix any component API mismatches** If any component demos don't render due to API mismatches (wrong prop names, different compound component structure), read the specific component source file and fix the demo code to match the actual API. - [ ] **Step 3: Final commit** ```bash git add -A packages/showcase/ git commit -m "feat(showcase): complete kitchen sink with all 44 components" ```