@reinvented/design 0.2.0 → 0.3.0

package/docs/components/remaining-components.md

@@ -0,0 +1,253 @@
+# Tooltip
+## Skeleton Code
+```vue
+<script setup>
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Button } from '@reinvented/design'
+</script>
+<template>
+  <TooltipProvider>
+    <Tooltip>
+      <TooltipTrigger as-child>
+        <Button variant="ghost" size="icon"><Settings class="w-4 h-4" /></Button>
+      </TooltipTrigger>
+      <TooltipContent><p>Settings</p></TooltipContent>
+    </Tooltip>
+  </TooltipProvider>
+</template>
+```
+## Gotchas
+- Wrap the app root with `<TooltipProvider>` once
+- Use for icon-only buttons to provide text labels
+- Keep tooltip text to 1-2 words
+
+---
+
+# Popover
+## Skeleton Code
+```vue
+<script setup>
+import { Popover, PopoverContent, PopoverTrigger, Button } from '@reinvented/design'
+</script>
+<template>
+  <Popover>
+    <PopoverTrigger as-child>
+      <Button variant="outline">Open</Button>
+    </PopoverTrigger>
+    <PopoverContent class="w-80">
+      <div class="grid gap-4">
+        <h4 class="font-medium leading-none">Dimensions</h4>
+        <p class="text-sm text-muted-foreground">Set the dimensions for the layer.</p>
+      </div>
+    </PopoverContent>
+  </Popover>
+</template>
+```
+## Gotchas
+- Override width with class on `PopoverContent`
+- Default alignment is `center` — use `align="start"` or `align="end"` as needed
+
+---
+
+# HoverCard
+## Skeleton Code
+```vue
+<script setup>
+import { HoverCard, HoverCardContent, HoverCardTrigger } from '@reinvented/design'
+</script>
+<template>
+  <HoverCard>
+    <HoverCardTrigger as-child>
+      <a href="/user/janakan" class="underline">@janakan</a>
+    </HoverCardTrigger>
+    <HoverCardContent class="w-80">
+      <div class="flex justify-between gap-4">
+        <!-- User preview card content -->
+      </div>
+    </HoverCardContent>
+  </HoverCard>
+</template>
+```
+
+---
+
+# Alert
+## Variants
+| Variant | Use for |
+|---------|---------|
+| `default` | Informational notices |
+| `destructive` | Errors, critical warnings |
+
+## Skeleton Code
+```vue
+<script setup>
+import { Alert, AlertDescription, AlertTitle } from '@reinvented/design'
+import { AlertCircle } from 'lucide-vue-next'
+</script>
+<template>
+  <Alert variant="destructive">
+    <AlertCircle class="h-4 w-4" />
+    <AlertTitle>Error</AlertTitle>
+    <AlertDescription>Something went wrong.</AlertDescription>
+  </Alert>
+</template>
+```
+
+---
+
+# Form Components
+
+## Label
+```vue
+<script setup>
+import { Label } from '@reinvented/design'
+</script>
+<template><Label for="email">Email</Label></template>
+```
+
+## Textarea
+```vue
+<script setup>
+import { Textarea, Label } from '@reinvented/design'
+</script>
+<template>
+  <div class="space-y-2">
+    <Label for="bio">Bio</Label>
+    <Textarea id="bio" placeholder="Tell us about yourself" />
+  </div>
+</template>
+```
+
+## Switch
+```vue
+<script setup>
+import { Switch, Label } from '@reinvented/design'
+</script>
+<template>
+  <div class="flex items-center gap-2">
+    <Switch id="dark-mode" />
+    <Label for="dark-mode">Dark mode</Label>
+  </div>
+</template>
+```
+
+## Checkbox
+```vue
+<script setup>
+import { Checkbox, Label } from '@reinvented/design'
+</script>
+<template>
+  <div class="flex items-center gap-2">
+    <Checkbox id="terms" />
+    <Label for="terms">Accept terms and conditions</Label>
+  </div>
+</template>
+```
+
+## RadioGroup
+```vue
+<script setup>
+import { RadioGroup, RadioGroupItem, Label } from '@reinvented/design'
+</script>
+<template>
+  <RadioGroup default-value="comfortable">
+    <div class="flex items-center gap-2">
+      <RadioGroupItem value="default" id="r1" />
+      <Label for="r1">Default</Label>
+    </div>
+    <div class="flex items-center gap-2">
+      <RadioGroupItem value="comfortable" id="r2" />
+      <Label for="r2">Comfortable</Label>
+    </div>
+  </RadioGroup>
+</template>
+```
+
+---
+
+# Accordion
+## Skeleton Code
+```vue
+<script setup>
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@reinvented/design'
+</script>
+<template>
+  <Accordion type="single" collapsible>
+    <AccordionItem value="item-1">
+      <AccordionTrigger>Is it accessible?</AccordionTrigger>
+      <AccordionContent>Yes. It adheres to the WAI-ARIA design pattern.</AccordionContent>
+    </AccordionItem>
+  </Accordion>
+</template>
+```
+
+---
+
+# Breadcrumb
+## Skeleton Code
+```vue
+<script setup>
+import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from '@reinvented/design'
+</script>
+<template>
+  <Breadcrumb>
+    <BreadcrumbList>
+      <BreadcrumbItem><BreadcrumbLink href="/">Home</BreadcrumbLink></BreadcrumbItem>
+      <BreadcrumbSeparator />
+      <BreadcrumbItem><BreadcrumbLink href="/items">Items</BreadcrumbLink></BreadcrumbItem>
+      <BreadcrumbSeparator />
+      <BreadcrumbItem><BreadcrumbPage>Current</BreadcrumbPage></BreadcrumbItem>
+    </BreadcrumbList>
+  </Breadcrumb>
+</template>
+```
+
+---
+
+# Progress
+```vue
+<script setup>
+import { Progress } from '@reinvented/design'
+</script>
+<template><Progress :model-value="60" /></template>
+```
+
+# Slider
+```vue
+<script setup>
+import { Slider } from '@reinvented/design'
+</script>
+<template><Slider :model-value="[50]" :max="100" :step="1" /></template>
+```
+
+# Toggle
+```vue
+<script setup>
+import { Toggle } from '@reinvented/design'
+import { Bold } from 'lucide-vue-next'
+</script>
+<template><Toggle variant="outline" aria-label="Toggle bold"><Bold class="h-4 w-4" /></Toggle></template>
+```
+
+# Command
+## When to Use
+- Command palette (Ctrl+K)
+- Searchable list selection
+
+## Skeleton Code
+```vue
+<script setup>
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@reinvented/design'
+</script>
+<template>
+  <Command>
+    <CommandInput placeholder="Type to search..." />
+    <CommandList>
+      <CommandEmpty>No results found.</CommandEmpty>
+      <CommandGroup heading="Actions">
+        <CommandItem value="create">Create new item</CommandItem>
+        <CommandItem value="search">Search items</CommandItem>
+      </CommandGroup>
+    </CommandList>
+  </Command>
+</template>
+```

package/docs/components/scroll-area.md

@@ -0,0 +1,17 @@
+# ScrollArea
+## Skeleton Code
+```vue
+<script setup>
+import { ScrollArea } from '@reinvented/design'
+</script>
+<template>
+  <ScrollArea class="h-72 w-48 rounded-md border">
+    <div class="p-4">
+      <!-- Scrollable content -->
+    </div>
+  </ScrollArea>
+</template>
+```
+## Gotchas
+- Must have explicit height set via class
+- Use instead of native scrollbars per DS rules

package/docs/components/select.md

@@ -0,0 +1,31 @@
+# Select
+## When to Use
+- Single-value selection from a list of options
+- When NOT to use: multi-select (use Checkbox group), binary toggle (use Switch)
+
+## Skeleton Code
+```vue
+<script setup>
+import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from '@reinvented/design'
+</script>
+
+<template>
+  <Select>
+    <SelectTrigger class="w-[180px]">
+      <SelectValue placeholder="Select a fruit" />
+    </SelectTrigger>
+    <SelectContent>
+      <SelectGroup>
+        <SelectLabel>Fruits</SelectLabel>
+        <SelectItem value="apple">Apple</SelectItem>
+        <SelectItem value="banana">Banana</SelectItem>
+        <SelectItem value="orange">Orange</SelectItem>
+      </SelectGroup>
+    </SelectContent>
+  </Select>
+</template>
+```
+
+## Gotchas
+- Use `placeholder` on `SelectValue` for the empty state text
+- Supports `v-model` via `modelValue` prop on `Select`

package/docs/components/separator.md

@@ -0,0 +1,14 @@
+# Separator
+## Skeleton Code
+```vue
+<script setup>
+import { Separator } from '@reinvented/design'
+</script>
+<template>
+  <Separator />                         <!-- Horizontal -->
+  <Separator orientation="vertical" />  <!-- Vertical -->
+</template>
+```
+## Gotchas
+- Use between logical sections, not decoratively
+- Vertical separators need a container with `flex` and explicit height

package/docs/components/sheet.md

@@ -0,0 +1,32 @@
+# Sheet
+## When to Use
+- Side panels for details or filters
+- Mobile navigation drawers
+- Quick edit forms that need more space than a dialog
+
+## Skeleton Code
+```vue
+<script setup>
+import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger, Button } from '@reinvented/design'
+</script>
+<template>
+  <Sheet>
+    <SheetTrigger as-child>
+      <Button variant="outline">Open</Button>
+    </SheetTrigger>
+    <SheetContent>
+      <SheetHeader>
+        <SheetTitle>Edit Profile</SheetTitle>
+        <SheetDescription>Make changes to your profile here.</SheetDescription>
+      </SheetHeader>
+      <!-- Content here -->
+    </SheetContent>
+  </Sheet>
+</template>
+```
+## Side Variants
+Use `side` prop on `SheetContent`: `"top"`, `"bottom"`, `"left"`, `"right"` (default: `"right"`).
+
+## Gotchas
+- Default width is `sm:max-w-sm` — override with class if wider content needed
+- Mobile: use `side="bottom"` for bottom sheets

package/docs/components/skeleton.md

@@ -0,0 +1,20 @@
+# Skeleton
+## Skeleton Code
+```vue
+<script setup>
+import { Skeleton } from '@reinvented/design'
+</script>
+<template>
+  <!-- Match shape of real content -->
+  <div class="flex items-center gap-3">
+    <Skeleton class="w-10 h-10 rounded-full" />
+    <div class="flex-1 space-y-2">
+      <Skeleton class="h-4 w-3/4" />
+      <Skeleton class="h-3 w-1/2" />
+    </div>
+  </div>
+</template>
+```
+## Gotchas
+- Must match the shape of actual content layout
+- Never show bare spinner — always show skeletons matching the data shape

package/docs/components/table.md

@@ -0,0 +1,33 @@
+# Table
+## Sub-components
+`Table`, `TableHeader`, `TableBody`, `TableFooter`, `TableRow`, `TableHead`, `TableCell`, `TableCaption`
+
+## Skeleton Code
+```vue
+<script setup>
+import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow } from '@reinvented/design'
+</script>
+<template>
+  <Table>
+    <TableCaption>A list of your recent invoices.</TableCaption>
+    <TableHeader>
+      <TableRow>
+        <TableHead>Invoice</TableHead>
+        <TableHead>Status</TableHead>
+        <TableHead class="text-right">Amount</TableHead>
+      </TableRow>
+    </TableHeader>
+    <TableBody>
+      <TableRow v-for="item in items" :key="item.id">
+        <TableCell class="font-medium">{{ item.invoice }}</TableCell>
+        <TableCell>{{ item.status }}</TableCell>
+        <TableCell class="text-right">{{ item.amount }}</TableCell>
+      </TableRow>
+    </TableBody>
+  </Table>
+</template>
+```
+## Gotchas
+- Use `text-right` for numeric columns
+- Use `font-medium` for the primary identifier column
+- For empty state, show a full-width row with empty state message

package/docs/components/tabs.md

@@ -0,0 +1,23 @@
+# Tabs
+## Skeleton Code
+```vue
+<script setup>
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@reinvented/design'
+</script>
+<template>
+  <Tabs default-value="overview">
+    <TabsList>
+      <TabsTrigger value="overview">Overview</TabsTrigger>
+      <TabsTrigger value="analytics">Analytics</TabsTrigger>
+      <TabsTrigger value="settings">Settings</TabsTrigger>
+    </TabsList>
+    <TabsContent value="overview">Overview content</TabsContent>
+    <TabsContent value="analytics">Analytics content</TabsContent>
+    <TabsContent value="settings">Settings content</TabsContent>
+  </Tabs>
+</template>
+```
+## Gotchas
+- Use `default-value` for uncontrolled, `v-model` for controlled
+- Tab values must be unique strings
+- Keep tab labels short (1-2 words)

package/docs/layouts/dashboard.md

@@ -0,0 +1,70 @@
+# Dashboard Layout
+
+## When to Use
+- App home/overview pages
+- Stats summaries with key metrics
+- Quick-access to recent items
+
+## Skeleton Code
+
+```vue
+<script setup>
+import {
+  Card, CardContent, CardDescription, CardHeader, CardTitle, Skeleton,
+} from '@reinvented/design'
+import { Activity, Users, CreditCard, DollarSign } from 'lucide-vue-next'
+</script>
+
+<template>
+  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 space-y-6">
+
+    <!-- Page Header -->
+    <div>
+      <h1 class="text-2xl font-bold tracking-tight">Dashboard</h1>
+      <p class="text-muted-foreground">Overview of your workspace.</p>
+    </div>
+
+    <!-- Stats Grid -->
+    <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+      <Card>
+        <CardHeader class="flex flex-row items-center justify-between pb-2">
+          <CardTitle class="text-sm font-medium">Total Revenue</CardTitle>
+          <DollarSign class="h-4 w-4 text-muted-foreground" />
+        </CardHeader>
+        <CardContent>
+          <p class="text-2xl font-bold">$45,231</p>
+          <p class="text-xs text-muted-foreground">+20.1% from last month</p>
+        </CardContent>
+      </Card>
+      <!-- Repeat for other stats -->
+    </div>
+
+    <!-- Content Grid -->
+    <div class="grid gap-6 md:grid-cols-2 lg:grid-cols-7">
+      <Card class="col-span-4">
+        <CardHeader>
+          <CardTitle>Overview</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <!-- Chart or main content -->
+        </CardContent>
+      </Card>
+      <Card class="col-span-3">
+        <CardHeader>
+          <CardTitle>Recent Activity</CardTitle>
+          <CardDescription>Latest actions in your workspace.</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <!-- Activity list -->
+        </CardContent>
+      </Card>
+    </div>
+  </div>
+</template>
+```
+
+## Key Patterns
+- **Stats row**: 4-column grid of metric cards
+- **Content grid**: Asymmetric grid (4/7 + 3/7) for main content + sidebar
+- **Card headers**: Icon + title aligned horizontally
+- **Responsive**: Stack to 2-col then 1-col on smaller screens

package/docs/layouts/detail-page.md

@@ -0,0 +1,83 @@
+# Detail Page Layout
+
+## When to Use
+- Viewing a single item's complete information
+- Item detail with related data sections
+- Edit-in-place forms
+
+## Skeleton Code
+
+```vue
+<script setup>
+import {
+  Button, Badge, Separator, Tabs, TabsContent, TabsList, TabsTrigger,
+  Card, CardContent, CardHeader, CardTitle, Skeleton,
+  Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator,
+} from '@reinvented/design'
+import { ArrowLeft, Pencil, Trash2 } from 'lucide-vue-next'
+
+const item = ref(null)
+const loading = ref(true)
+</script>
+
+<template>
+  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 space-y-6">
+
+    <!-- Breadcrumb -->
+    <Breadcrumb>
+      <BreadcrumbList>
+        <BreadcrumbItem><BreadcrumbLink href="/items">Items</BreadcrumbLink></BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem><BreadcrumbPage>{{ item?.name }}</BreadcrumbPage></BreadcrumbItem>
+      </BreadcrumbList>
+    </Breadcrumb>
+
+    <!-- Page Header -->
+    <div class="flex items-center justify-between">
+      <div class="flex items-center gap-3">
+        <h1 class="text-2xl font-bold tracking-tight">{{ item?.name }}</h1>
+        <Badge>{{ item?.status }}</Badge>
+      </div>
+      <div class="flex items-center gap-2">
+        <Button variant="outline"><Pencil class="mr-2 h-4 w-4" /> Edit</Button>
+        <Button variant="destructive"><Trash2 class="mr-2 h-4 w-4" /> Delete</Button>
+      </div>
+    </div>
+
+    <Separator />
+
+    <!-- Tabbed Content -->
+    <Tabs default-value="overview">
+      <TabsList>
+        <TabsTrigger value="overview">Overview</TabsTrigger>
+        <TabsTrigger value="activity">Activity</TabsTrigger>
+        <TabsTrigger value="settings">Settings</TabsTrigger>
+      </TabsList>
+
+      <TabsContent value="overview" class="space-y-6">
+        <!-- Detail Cards -->
+        <div class="grid gap-6 md:grid-cols-2">
+          <Card>
+            <CardHeader><CardTitle>Details</CardTitle></CardHeader>
+            <CardContent>
+              <dl class="space-y-3">
+                <div>
+                  <dt class="text-sm text-muted-foreground">Created</dt>
+                  <dd class="text-sm font-medium">{{ item?.createdAt }}</dd>
+                </div>
+              </dl>
+            </CardContent>
+          </Card>
+        </div>
+      </TabsContent>
+    </Tabs>
+  </div>
+</template>
+```
+
+## Key Patterns
+- **Breadcrumb** at the top for back navigation
+- **Header**: Title + badge + action buttons
+- **Tabbed sections** for detailed content
+- **Detail cards** in a 2-column grid for metadata
+- **Separator** between header and tabbed content

package/docs/layouts/index.md

@@ -1,32 +1,45 @@
-# Layouts Index
+# Layout Documentation
 
-Page-level layout components with slots. Each layout is a Vue component in `src/layouts/` AND documented here with skeleton code and usage guidance.
+## Decision Tree
+
+Use this tree to choose the right layout for each view:
+
+```
+Is this a list of items?
+├─ Yes → List Page (list-page.md)
+├─ No
+│  ├─ Is this showing a single item's details?
+│  │  ├─ Yes → Detail Page (detail-page.md)
+│  │  ├─ No
+│  │  │  ├─ Is this a dashboard/overview?
+│  │  │  │  ├─ Yes → Dashboard (dashboard.md)
+│  │  │  │  ├─ No
+│  │  │  │  │  ├─ Is this a settings/configuration page?
+│  │  │  │  │  │  ├─ Yes → Settings Page (settings-page.md)
+│  │  │  │  │  │  ├─ No
+│  │  │  │  │  │  │  ├─ Is this a multi-step process?
+│  │  │  │  │  │  │  │  ├─ Yes → Step Wizard (step-wizard.md)
+│  │  │  │  │  │  │  │  ├─ No
+│  │  │  │  │  │  │  │  │  ├─ Is this a simple form?
+│  │  │  │  │  │  │  │  │  │  ├─ ≤5 fields → Modal Form (use Dialog)
+│  │  │  │  │  │  │  │  │  │  ├─ >5 fields → Full Page Form (detail-page.md variant)
+```
 
 ## Available Layouts
 
 | Layout | File | Use for |
 |--------|------|---------|
-| [List Page](list-page.md) | `list-page.md` | Browsing collections (tasks, members, notifications) |
-| [Detail Page](detail-page.md) | `detail-page.md` | Viewing a single item with full context |
-| [Dashboard](dashboard.md) | `dashboard.md` | Overview with stats, charts, recent activity |
-| [Modal Form](modal-form.md) | `modal-form.md` | Create/edit dialogs with form fields |
-| [Settings Page](settings-page.md) | `settings-page.md` | Configuration with sectioned form |
-
-## Choosing a Layout
-
-```
-What is the user doing?
-  ├── Browsing a list of things → List Page
-  ├── Looking at one specific thing → Detail Page
-  ├── Getting an overview / summary → Dashboard
-  ├── Creating or editing something → Modal Form (default) or Settings Page (complex)
-  └── Configuring settings → Settings Page
-```
+| [List Page](list-page.md) | ✅ | Filterable, searchable lists of items |
+| [Detail Page](detail-page.md) | ✅ | Single item view with actions |
+| [Dashboard](dashboard.md) | ✅ | Overview grids with stats and summaries |
+| [Settings Page](settings-page.md) | ✅ | Configuration with sidebar nav |
+| [Step Wizard](step-wizard.md) | ✅ | Multi-step guided processes |
+| Modal Form | — | Use Dialog component (≤5 fields) |
 
-## Layout Component Structure
+## General Layout Rules
 
-All layout components follow the same convention:
-- Accept a `class` prop for customization
-- Use named slots for content areas (header, content, footer, etc.)
-- Handle responsive breakpoints internally
-- Use DS tokens for spacing and typography
+1. **Max content width**: `max-w-7xl mx-auto` for main content
+2. **Page padding**: `px-4 sm:px-6 lg:px-8`
+3. **Section spacing**: `space-y-6` between major sections
+4. **Page header pattern**: Title + description + primary action
+5. **Responsive**: All layouts must work at mobile (320px+), tablet (768px+), desktop (1024px+)