@reinvented/design 0.2.0 → 0.2.1

package/docs/components/alert-dialog.md

@@ -0,0 +1,32 @@
+# AlertDialog
+## When to Use
+- Destructive action confirmation (delete, remove, irreversible changes)
+
+## Skeleton Code
+```vue
+<script setup>
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, Button } from '@reinvented/design'
+</script>
+
+<template>
+  <AlertDialog>
+    <AlertDialogTrigger as-child>
+      <Button variant="destructive">Delete</Button>
+    </AlertDialogTrigger>
+    <AlertDialogContent>
+      <AlertDialogHeader>
+        <AlertDialogTitle>Are you sure?</AlertDialogTitle>
+        <AlertDialogDescription>This action cannot be undone.</AlertDialogDescription>
+      </AlertDialogHeader>
+      <AlertDialogFooter>
+        <AlertDialogCancel>Cancel</AlertDialogCancel>
+        <AlertDialogAction>Delete Item</AlertDialogAction>
+      </AlertDialogFooter>
+    </AlertDialogContent>
+  </AlertDialog>
+</template>
+```
+
+## Gotchas
+- Action button text must describe what it does ("Delete Task", not "OK")
+- Cancel is always the default focused element

package/docs/components/avatar.md

@@ -0,0 +1,14 @@
+# Avatar
+## Skeleton Code
+```vue
+<script setup>
+import { Avatar } from '@reinvented/design'
+</script>
+<template>
+  <Avatar src="/user.jpg" alt="User name" />
+  <Avatar>JD</Avatar> <!-- Fallback initials -->
+</template>
+```
+## Gotchas
+- Always provide `alt` text for accessibility
+- Fallback shows slot content when `src` fails to load

package/docs/components/badge.md

@@ -0,0 +1,24 @@
+# Badge
+## Variants
+| Variant | Use for |
+|---------|---------|
+| `default` | Neutral status |
+| `secondary` | Subtle labels |
+| `destructive` | Error/danger status |
+| `outline` | Bordered labels |
+
+## Skeleton Code
+```vue
+<script setup>
+import { Badge } from '@reinvented/design'
+</script>
+<template>
+  <Badge>Active</Badge>
+  <Badge variant="destructive">Error</Badge>
+  <Badge variant="secondary">Draft</Badge>
+  <Badge variant="outline">v1.2</Badge>
+</template>
+```
+## Gotchas
+- Use for status indicators, never for interactive actions (use Button for that)
+- Keep text short (1-2 words)

package/docs/components/button.md

@@ -0,0 +1,69 @@
+# Button
+
+## Variants
+| Variant | Use for |
+|---------|---------|
+| `default` | Primary actions |
+| `secondary` | Secondary actions |
+| `destructive` | Delete, remove, cancel |
+| `outline` | Tertiary actions |
+| `ghost` | Toolbar actions, icon-only buttons |
+| `link` | Inline text actions |
+| `success` | Positive confirmation actions |
+
+## Sizes
+| Size | Use for |
+|------|---------|
+| `default` | Standard buttons |
+| `xs` | Compact UI, inline actions |
+| `sm` | Compact UI, table rows |
+| `lg` | Hero CTAs, empty state actions |
+| `xl` | Landing page CTAs |
+| `icon` | Icon-only square buttons |
+
+## Skeleton Code
+
+```vue
+<script setup>
+import { Button } from '@reinvented/design'
+</script>
+
+<template>
+  <Button>Default</Button>
+  <Button variant="secondary">Secondary</Button>
+  <Button variant="destructive">Delete</Button>
+  <Button variant="outline">Outline</Button>
+  <Button variant="ghost">Ghost</Button>
+  <Button size="sm">Small</Button>
+  <Button size="icon"><Trash2 class="w-4 h-4" /></Button>
+</template>
+```
+
+## With Loading State
+
+```vue
+<script setup>
+import { ref } from 'vue'
+import { Button } from '@reinvented/design'
+import { Loader2 } from 'lucide-vue-next'
+
+const saving = ref(false)
+async function handleSave() {
+  saving.value = true
+  try { await saveMutation() }
+  finally { saving.value = false }
+}
+</script>
+
+<template>
+  <Button :disabled="saving" @click="handleSave">
+    <Loader2 v-if="saving" class="w-4 h-4 mr-2 animate-spin" />
+    {{ saving ? 'Saving...' : 'Save' }}
+  </Button>
+</template>
+```
+
+## Gotchas
+- Always provide `aria-label` for icon-only buttons
+- Use `type="button"` to prevent form submission unless intended
+- Use `as="a"` prop to render as a link element with button styling

package/docs/components/card.md

@@ -0,0 +1,49 @@
+# Card
+
+## Sub-components
+| Component | Use for |
+|-----------|---------|
+| `Card` | Container wrapper |
+| `CardHeader` | Title + description area |
+| `CardTitle` | Main heading |
+| `CardDescription` | Subtitle or description |
+| `CardContent` | Main content area |
+| `CardFooter` | Actions area |
+
+## Skeleton Code
+
+```vue
+<script setup>
+import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, Button } from '@reinvented/design'
+</script>
+
+<template>
+  <Card>
+    <CardHeader>
+      <CardTitle>Card Title</CardTitle>
+      <CardDescription>Card description text</CardDescription>
+    </CardHeader>
+    <CardContent>
+      <p>Card content goes here</p>
+    </CardContent>
+    <CardFooter>
+      <Button>Action</Button>
+    </CardFooter>
+  </Card>
+</template>
+```
+
+## Clickable Card
+
+```vue
+<template>
+  <Card class="transition-shadow duration-150 hover:shadow-md cursor-pointer" @click="navigate">
+    <!-- content -->
+  </Card>
+</template>
+```
+
+## Gotchas
+- Don't nest cards inside cards
+- Use `CardFooter` for actions, not `CardContent`
+- Apply hover styles via `class` prop, not custom CSS

package/docs/components/dialog.md

@@ -0,0 +1,46 @@
+# Dialog
+## When to Use
+- Simple create/edit forms (≤ 5 fields)
+- Confirmations
+- Quick actions that keep page context
+
+When NOT to use: Forms with 8+ fields (use full page), rich content editing (use full page).
+
+## Sub-components
+`Dialog`, `DialogTrigger`, `DialogContent`, `DialogHeader`, `DialogFooter`, `DialogTitle`, `DialogDescription`, `DialogClose`, `DialogScrollContent`
+
+## Skeleton Code
+```vue
+<script setup>
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, Button, Input, Label } from '@reinvented/design'
+</script>
+
+<template>
+  <Dialog>
+    <DialogTrigger as-child>
+      <Button>Create Item</Button>
+    </DialogTrigger>
+    <DialogContent>
+      <DialogHeader>
+        <DialogTitle>Create New Item</DialogTitle>
+        <DialogDescription>Fill in the details below.</DialogDescription>
+      </DialogHeader>
+      <div class="grid gap-4 py-4">
+        <div class="space-y-2">
+          <Label for="name">Name</Label>
+          <Input id="name" placeholder="Item name" />
+        </div>
+      </div>
+      <DialogFooter>
+        <Button variant="outline">Cancel</Button>
+        <Button>Save</Button>
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>
+</template>
+```
+
+## Gotchas
+- Use `as-child` on `DialogTrigger` to avoid nested buttons
+- For long content, use `DialogScrollContent` instead of `DialogContent`
+- Always include `DialogTitle` for accessibility (even if visually hidden)

package/docs/components/dropdown-menu.md

@@ -0,0 +1,32 @@
+# DropdownMenu
+## When to Use
+- Action menus on items (edit, delete, share)
+- User profile menus
+- More options (...) buttons
+
+## Skeleton Code
+```vue
+<script setup>
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, Button } from '@reinvented/design'
+import { MoreHorizontal, Pencil, Trash2 } from 'lucide-vue-next'
+</script>
+
+<template>
+  <DropdownMenu>
+    <DropdownMenuTrigger as-child>
+      <Button variant="ghost" size="icon"><MoreHorizontal class="w-4 h-4" /></Button>
+    </DropdownMenuTrigger>
+    <DropdownMenuContent align="end">
+      <DropdownMenuLabel>Actions</DropdownMenuLabel>
+      <DropdownMenuSeparator />
+      <DropdownMenuItem><Pencil class="mr-2 h-4 w-4" /> Edit</DropdownMenuItem>
+      <DropdownMenuItem class="text-destructive"><Trash2 class="mr-2 h-4 w-4" /> Delete</DropdownMenuItem>
+    </DropdownMenuContent>
+  </DropdownMenu>
+</template>
+```
+
+## Gotchas
+- Use `align="end"` for right-aligned menus
+- Use `as-child` on trigger to compose with existing buttons
+- Destructive items should use `class="text-destructive"`

package/docs/components/index.md

@@ -1,50 +1,69 @@
-# Components Index
-
-Usage guides for `@reinvented/design` components. Read individual files for detailed usage, gotchas, and skeleton code.
-
-## Styled Components
-
-| Component | File | Use for |
-|-----------|------|---------|
-| [Button](button.md) | `button.md` | All clickable actions |
-| [Card](card.md) | `card.md` | Content containers, list items |
-| [Input](input.md) | `input.md` | Text input fields |
-| [Badge](badge.md) | `badge.md` | Status indicators, counts, tags |
-| [Avatar](avatar.md) | `avatar.md` | User/entity profile images |
-| [Separator](separator.md) | `separator.md` | Visual dividers |
-| [Skeleton](skeleton.md) | `skeleton.md` | Loading placeholders |
-| [ScrollArea](scroll-area.md) | `scroll-area.md` | Custom scrollable regions |
-
-## Radix Primitives (styled via Tailwind + tokens)
-
-These are re-exported from radix-vue. Use with `cn()` and design tokens.
-
-| Component | Use for |
-|-----------|---------|
-| Dialog | Modal dialogs (create, edit, confirm) |
-| AlertDialog | Destructive action confirmation |
-| DropdownMenu | Context menus, action menus |
-| Select | Single-value selection |
-| Tabs | Section navigation within a view |
-| Tooltip | Hover hints |
-| Popover | Rich hover/click content |
-| Accordion | Collapsible sections |
-| Switch | On/off toggles |
-| Checkbox | Multi-select options |
-| RadioGroup | Single-select from options |
-| Progress | Progress indicators |
-| Slider | Range input |
-| Collapsible | Show/hide content blocks |
-| ContextMenu | Right-click menus |
-| NavigationMenu | Top-level navigation |
-| HoverCard | Rich hover preview |
-| ToggleGroup | Grouped toggles |
-| Pagination | Page navigation |
-
-## External Re-exports
-
-| Component | From | Use for |
-|-----------|------|---------|
-| Toaster / toast | vue-sonner | Toast notifications |
-
-> **Note**: Many primitives above need proper styled wrappers (like Button, Card, etc. have). See [rules.md](../rules.md) — agents should always use DS components, never raw HTML elements.
+# Component Index
+
+All DS components available from `@reinvented/design`. Each component links to its documentation.
+
+## Core Display
+| Component | Doc | Description |
+|-----------|-----|-------------|
+| [Button](button.md) | ✅ | Actions with 7 variants + 6 sizes |
+| [Card](card.md) | ✅ | Content containers with header/footer |
+| [Badge](badge.md) | ✅ | Status labels and tags |
+| [Avatar](avatar.md) | ✅ | User/entity images with fallback |
+| [Separator](separator.md) | ✅ | Visual dividers |
+| [Skeleton](skeleton.md) | ✅ | Loading placeholders |
+| [ScrollArea](scroll-area.md) | ✅ | Custom-scrollbar containers |
+
+## Data Input
+| Component | Doc | Description |
+|-----------|-----|-------------|
+| [Input](input.md) | ✅ | Text input fields |
+| [Textarea](remaining-components.md#textarea) | ✅ | Multi-line text |
+| [Select](select.md) | ✅ | Single-value dropdown selection |
+| [Checkbox](remaining-components.md#checkbox) | ✅ | Boolean toggle (checkmark) |
+| [Switch](remaining-components.md#switch) | ✅ | Boolean toggle (slider) |
+| [RadioGroup](remaining-components.md#radiogroup) | ✅ | Single-value from small set |
+| [Slider](remaining-components.md#slider) | ✅ | Numeric range input |
+| [Label](remaining-components.md#label) | ✅ | Form field labels |
+| [Form](remaining-components.md) | ✅ | vee-validate form integration |
+
+## Overlays
+| Component | Doc | Description |
+|-----------|-----|-------------|
+| [Dialog](dialog.md) | ✅ | Modal dialogs for forms/actions |
+| [AlertDialog](alert-dialog.md) | ✅ | Confirmation dialogs for destructive actions |
+| [Sheet](sheet.md) | ✅ | Side panels (left/right/top/bottom) |
+| [Popover](remaining-components.md#popover) | ✅ | Floating content panels |
+| [Tooltip](remaining-components.md#tooltip) | ✅ | Hover hints |
+| [HoverCard](remaining-components.md#hovercard) | ✅ | Rich hover previews |
+
+## Navigation & Menus
+| Component | Doc | Description |
+|-----------|-----|-------------|
+| [DropdownMenu](dropdown-menu.md) | ✅ | Action menus |
+| [ContextMenu](remaining-components.md) | ✅ | Right-click menus |
+| [Menubar](remaining-components.md) | ✅ | App menu bars |
+| [NavigationMenu](remaining-components.md) | ✅ | Site navigation |
+| [Tabs](tabs.md) | ✅ | Tab navigation |
+| [Breadcrumb](remaining-components.md#breadcrumb) | ✅ | Path navigation |
+| [Pagination](remaining-components.md) | ✅ | Page navigation |
+
+## Data Display
+| Component | Doc | Description |
+|-----------|-----|-------------|
+| [Table](table.md) | ✅ | Tabular data |
+| [Accordion](remaining-components.md#accordion) | ✅ | Collapsible sections |
+| [Collapsible](remaining-components.md) | ✅ | Show/hide content |
+| [Progress](remaining-components.md#progress) | ✅ | Progress bars |
+
+## Actions
+| Component | Doc | Description |
+|-----------|-----|-------------|
+| [Toggle](remaining-components.md#toggle) | ✅ | State toggle buttons |
+| [ToggleGroup](remaining-components.md) | ✅ | Grouped toggles |
+| [Command](remaining-components.md#command) | ✅ | Command palette / searchable list |
+
+## Feedback
+| Component | Doc | Description |
+|-----------|-----|-------------|
+| [Alert](remaining-components.md#alert) | ✅ | Inline notifications |
+| Toast (`vue-sonner`) | — | Ephemeral notifications |

package/docs/components/input.md

@@ -0,0 +1,34 @@
+# Input
+
+## Skeleton Code
+
+```vue
+<script setup>
+import { Input, Label } from '@reinvented/design'
+import { ref } from 'vue'
+const value = ref('')
+</script>
+
+<template>
+  <div class="space-y-2">
+    <Label for="email">Email</Label>
+    <Input id="email" v-model="value" type="email" placeholder="name@example.com" />
+  </div>
+</template>
+```
+
+## With Icon
+
+```vue
+<template>
+  <div class="relative">
+    <Search class="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+    <Input class="pl-9" placeholder="Search..." />
+  </div>
+</template>
+```
+
+## Gotchas
+- Always pair with `<Label>` for accessibility
+- Use `placeholder` for format hints, not labels
+- Supports `v-model` for two-way binding

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>
+```