@reinvented/design 1.0.0 → 1.1.0

package/skills/components/dialog.md

@@ -0,0 +1,109 @@
+# Dialog & AlertDialog
+
+Modal overlays for forms, confirmations, and focused interactions.
+
+```ts
+import {
+  Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter, DialogTrigger, DialogClose,
+  AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger
+} from '@reinvented/design'
+```
+
+## Dialog
+
+Use for: create/edit forms, detail views, settings, any focused task with ≤6 fields.
+
+```tsx
+<Dialog v-model:open="showDialog">
+  <DialogTrigger as-child>
+    <Button><Plus className="w-4 h-4" /> Create Project</Button>
+  </DialogTrigger>
+  <DialogContent className="sm:max-w-md">
+    <DialogHeader>
+      <DialogTitle>Create Project</DialogTitle>
+      <DialogDescription>Add a new project to your workspace.</DialogDescription>
+    </DialogHeader>
+    <div className="space-y-4 py-4">
+      <div className="space-y-2">
+        <Label for="name">Name</Label>
+        <Input id="name" defaultValue="name" placeholder="Project name" />
+      </div>
+      <div className="space-y-2">
+        <Label for="description">Description</Label>
+        <Textarea id="description" defaultValue="description" placeholder="What is this project about?" />
+      </div>
+    </div>
+    <DialogFooter>
+      <DialogClose as-child>
+        <Button variant="outline">Cancel</Button>
+      </DialogClose>
+      <Button onClick="handleCreate">Create Project</Button>
+    </DialogFooter>
+  </DialogContent>
+</Dialog>
+```
+
+### Dialog Sizing
+
+| Class | Width | Use |
+|-------|-------|-----|
+| `sm:max-w-sm` | 384px | Simple confirmations, single-field input |
+| `sm:max-w-md` | 448px | Standard forms (2-4 fields) |
+| `sm:max-w-lg` | 512px | Larger forms (5-6 fields) |
+| `sm:max-w-xl` | 576px | Complex dialogs with multiple sections |
+| `sm:max-w-2xl` | 672px | Large content (preview panes, detailed forms) |
+
+### Scrollable Dialog
+
+For content that might overflow:
+
+```tsx
+<DialogScrollContent className="sm:max-w-lg">
+  <!-- Long content scrolls within the dialog -->
+</DialogScrollContent>
+```
+
+## AlertDialog
+
+Use for: all destructive/irreversible actions. The confirm button must say specifically what it does.
+
+```tsx
+<AlertDialog>
+  <AlertDialogTrigger as-child>
+    <Button variant="destructive" size="sm">Delete Project</Button>
+  </AlertDialogTrigger>
+  <AlertDialogContent>
+    <AlertDialogHeader>
+      <AlertDialogTitle>Delete "Project Alpha"?</AlertDialogTitle>
+      <AlertDialogDescription>
+        This will permanently delete the project and all 24 associated tasks. This action cannot be undone.
+      </AlertDialogDescription>
+    </AlertDialogHeader>
+    <AlertDialogFooter>
+      <AlertDialogCancel>Cancel</AlertDialogCancel>
+      <AlertDialogAction className="bg-destructive text-destructive-foreground hover:bg-destructive/90">
+        Delete Project
+      </AlertDialogAction>
+    </AlertDialogFooter>
+  </AlertDialogContent>
+</AlertDialog>
+```
+
+### AlertDialog Rules
+- The title should include the **name of the thing being deleted**
+- The description should state **what will be lost** and that it's **irreversible**
+- The confirm button must use a **specific verb**: "Delete Project", not "OK" or "Confirm"
+- The confirm button must be styled as destructive
+- Cancel is always the first (leftmost) button
+
+## Decision Tree
+
+```
+Is this a destructive action (delete, remove, reset)?
+├─ Yes → AlertDialog (always)
+├─ No
+│  ├─ Is this a form with ≤6 fields? → Dialog
+│  ├─ Is this a quick selection/input? → Dialog (sm:max-w-sm)
+│  ├─ Is this a complex form with 7+ fields? → Full page (not a dialog)
+│  └─ Is this showing details/preview? → Dialog (sm:max-w-xl or Sheet)
+```

package/skills/components/dropdown-menu.md

@@ -0,0 +1,117 @@
+# DropdownMenu, ContextMenu, Menubar
+
+Menu components for action lists and navigation.
+
+```ts
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, DropdownMenuGroup, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuShortcut } from '@reinvented/design'
+```
+
+## DropdownMenu
+
+The standard action menu. Used for overflow actions, user menus, and contextual operations.
+
+### Basic Menu
+```tsx
+<DropdownMenu>
+  <DropdownMenuTrigger as-child>
+    <Button variant="ghost" size="icon">
+      <MoreHorizontal className="w-4 h-4" />
+    </Button>
+  </DropdownMenuTrigger>
+  <DropdownMenuContent align="end">
+    <DropdownMenuItem>
+      <Pencil className="w-4 h-4" /> Edit
+    </DropdownMenuItem>
+    <DropdownMenuItem>
+      <Copy className="w-4 h-4" /> Duplicate
+    </DropdownMenuItem>
+    <DropdownMenuSeparator />
+    <DropdownMenuItem className="text-destructive">
+      <Trash2 className="w-4 h-4" /> Delete
+    </DropdownMenuItem>
+  </DropdownMenuContent>
+</DropdownMenu>
+```
+
+### Menu with Groups and Labels
+```tsx
+<DropdownMenuContent className="w-56">
+  <DropdownMenuLabel>My Account</DropdownMenuLabel>
+  <DropdownMenuSeparator />
+  <DropdownMenuGroup>
+    <DropdownMenuItem>
+      <User className="w-4 h-4" /> Profile
+      <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
+    </DropdownMenuItem>
+    <DropdownMenuItem>
+      <Settings className="w-4 h-4" /> Settings
+      <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
+    </DropdownMenuItem>
+  </DropdownMenuGroup>
+  <DropdownMenuSeparator />
+  <DropdownMenuItem>
+    <LogOut className="w-4 h-4" /> Log out
+  </DropdownMenuItem>
+</DropdownMenuContent>
+```
+
+### With Submenu
+```tsx
+<DropdownMenuSub>
+  <DropdownMenuSubTrigger>
+    <UserPlus className="w-4 h-4" /> Invite users
+  </DropdownMenuSubTrigger>
+  <DropdownMenuSubContent>
+    <DropdownMenuItem>Email</DropdownMenuItem>
+    <DropdownMenuItem>Slack</DropdownMenuItem>
+  </DropdownMenuSubContent>
+</DropdownMenuSub>
+```
+
+### Alignment
+| Prop | When to Use |
+|------|-------------|
+| `align="end"` | Default — menu opens to the left of the trigger (for right-aligned triggers) |
+| `align="start"` | Menu opens to the right of the trigger (for left-aligned triggers) |
+
+### Common Triggers
+
+```tsx
+<!-- Three-dot menu (most common) -->
+<Button variant="ghost" size="icon" className="h-8 w-8">
+  <MoreHorizontal className="w-4 h-4" />
+</Button>
+
+<!-- User avatar menu -->
+<Button variant="ghost" className="relative h-8 w-8 rounded-full">
+  <!-- Avatar here -->
+</Button>
+
+<!-- Chevron down (nav menus) -->
+<Button variant="ghost" size="sm">
+  Options <ChevronDown className="w-4 h-4" />
+</Button>
+```
+
+## ContextMenu
+
+Right-click context menu. Use sparingly — only when users expect right-click functionality.
+
+```tsx
+<ContextMenu>
+  <ContextMenuTrigger className="...">
+    <!-- Content that can be right-clicked -->
+  </ContextMenuTrigger>
+  <ContextMenuContent>
+    <ContextMenuItem>Cut</ContextMenuItem>
+    <ContextMenuItem>Copy</ContextMenuItem>
+    <ContextMenuItem>Paste</ContextMenuItem>
+  </ContextMenuContent>
+</ContextMenu>
+```
+
+## Rules
+- **Three-dot icon is `MoreHorizontal`**, not `MoreVertical`, in this design system
+- Destructive items use `className="text-destructive"` — they are red text, not red background
+- Always use `as-child` on `DropdownMenuTrigger` to render the child Button directly
+- `align="end"` is standard for action menus that appear from buttons on the right side of rows

package/skills/components/extended-components.md

@@ -0,0 +1,187 @@
+# Extended Components
+
+Documentation for additional standard Shadcn form, navigation, and utility components.
+
+```ts
+import {
+  Checkbox, RadioGroup, RadioGroupItem, Switch, Slider, Textarea,
+  Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator,
+  Menubar, MenubarContent, MenubarItem, MenubarMenu, MenubarSeparator, MenubarTrigger,
+  NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger,
+  Pagination, PaginationContent, PaginationEllipsis, PaginationFirst, PaginationLast, PaginationNext, PaginationPrev,
+  Collapsible, CollapsibleContent, CollapsibleTrigger,
+  Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger,
+  Skeleton, Separator, ScrollArea, AspectRatio
+} from '@reinvented/design'
+```
+
+## Form Additions
+
+### Checkbox
+```tsx
+<div className="flex items-center space-x-2">
+  <Checkbox id="terms" />
+  <label for="terms" className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
+    Accept terms and conditions
+  </label>
+</div>
+```
+
+### RadioGroup
+```tsx
+<RadioGroup default-value="comfortable">
+  <div className="flex items-center space-x-2">
+    <RadioGroupItem id="r1" value="default" />
+    <Label for="r1">Default</Label>
+  </div>
+  <div className="flex items-center space-x-2">
+    <RadioGroupItem id="r2" value="comfortable" />
+    <Label for="r2">Comfortable</Label>
+  </div>
+</RadioGroup>
+```
+
+### Switch
+```tsx
+<div className="flex items-center space-x-2">
+  <Switch id="airplane-mode" />
+  <Label for="airplane-mode">Airplane Mode</Label>
+</div>
+```
+
+### Slider
+```tsx
+<Slider :default-value="[33]" :max="100" :step="1" className="w-3/5" />
+```
+
+### Textarea
+```tsx
+<Textarea placeholder="Type your message here." className="resize-none" />
+```
+
+## Navigation Additions
+
+### Breadcrumb
+```tsx
+<Breadcrumb>
+  <BreadcrumbList>
+    <BreadcrumbItem>
+      <BreadcrumbLink href="/">Home</BreadcrumbLink>
+    </BreadcrumbItem>
+    <BreadcrumbSeparator />
+    <BreadcrumbItem>
+      <BreadcrumbPage>Current Page</BreadcrumbPage>
+    </BreadcrumbItem>
+  </BreadcrumbList>
+</Breadcrumb>
+```
+
+### Menubar
+Mac-OS style compact menu.
+```tsx
+<Menubar>
+  <MenubarMenu>
+    <MenubarTrigger>File</MenubarTrigger>
+    <MenubarContent>
+      <MenubarItem>New Tab</MenubarItem>
+      <MenubarSeparator />
+      <MenubarItem>Quit</MenubarItem>
+    </MenubarContent>
+  </MenubarMenu>
+</Menubar>
+```
+
+### NavigationMenu
+Radix-style navigation with animated viewports.
+```tsx
+<NavigationMenu>
+  <NavigationMenuList>
+    <NavigationMenuItem>
+      <NavigationMenuTrigger>Item One</NavigationMenuTrigger>
+      <NavigationMenuContent>
+        <!-- Content -->
+      </NavigationMenuContent>
+    </NavigationMenuItem>
+  </NavigationMenuList>
+</NavigationMenu>
+```
+
+### Pagination
+```tsx
+<Pagination :total="100" :sibling-count="1" show-edges :default-page="2">
+  <PaginationContent>
+    <PaginationFirst />
+    <PaginationPrev />
+    <!-- ... use template slots to generate buttons ... -->
+    <PaginationNext />
+    <PaginationLast />
+  </PaginationContent>
+</Pagination>
+```
+
+## Overlay Additions
+
+### Collapsible
+An interactive component which expands/collapses a panel.
+```tsx
+<Collapsible>
+  <CollapsibleTrigger as-child>
+    <Button variant="ghost">Toggle</Button>
+  </CollapsibleTrigger>
+  <CollapsibleContent>
+    Content here.
+  </CollapsibleContent>
+</Collapsible>
+```
+
+### Sheet
+Slide-out sidebar modal.
+```tsx
+<Sheet>
+  <SheetTrigger as-child><Button>Open</Button></SheetTrigger>
+  <SheetContent side="right">
+    <SheetHeader>
+      <SheetTitle>Edit profile</SheetTitle>
+      <SheetDescription>Make changes here.</SheetDescription>
+    </SheetHeader>
+    <!-- content -->
+  </SheetContent>
+</Sheet>
+```
+
+## Utility Additions
+
+### Skeleton
+Loading placeholder visualization.
+```tsx
+<div className="flex items-center space-x-4">
+  <Skeleton className="h-12 w-12 rounded-full" />
+  <div className="space-y-2">
+    <Skeleton className="h-4 w-64" />
+    <Skeleton className="h-4 w-48" />
+  </div>
+</div>
+```
+
+### Separator
+Visual or semantic divider.
+```tsx
+<Separator className="my-4" />
+<Separator orientation="vertical" className="h-full" />
+```
+
+### ScrollArea
+Custom scrollbars.
+```tsx
+<ScrollArea className="h-48 w-80 rounded-md border p-4">
+  Long content...
+</ScrollArea>
+```
+
+### AspectRatio
+Force a container's aspect ratio.
+```tsx
+<AspectRatio :ratio="16 / 9" className="bg-muted">
+  <img src="..." alt="..." className="object-cover" />
+</AspectRatio>
+```

package/skills/components/feedback.md

@@ -0,0 +1,165 @@
+# Feedback Components
+
+Alert, Tooltip, Popover, HoverCard, Progress, and Toast.
+
+```ts
+import { Alert, AlertTitle, AlertDescription } from '@reinvented/design'
+import { Tooltip, TooltipProvider, TooltipTrigger, TooltipContent } from '@reinvented/design'
+import { Popover, PopoverContent, PopoverTrigger } from '@reinvented/design'
+import { HoverCard, HoverCardContent, HoverCardTrigger } from '@reinvented/design'
+import { Progress } from '@reinvented/design'
+import { toast } from '@reinvented/design'
+```
+
+## Alert
+
+Inline notification banners for important messages within a page section.
+
+```tsx
+<!-- Default (informational) -->
+<Alert>
+  <Info className="h-4 w-4" />
+  <AlertTitle>Heads up</AlertTitle>
+  <AlertDescription>Your trial expires in 3 days. Upgrade to keep access.</AlertDescription>
+</Alert>
+
+<!-- Destructive (error) -->
+<Alert variant="destructive">
+  <AlertCircle className="h-4 w-4" />
+  <AlertTitle>Error</AlertTitle>
+  <AlertDescription>Failed to load data. Please try again.</AlertDescription>
+</Alert>
+
+<!-- Warning -->
+<Alert variant="warning">
+  <AlertTriangle className="h-4 w-4" />
+  <AlertTitle>Warning</AlertTitle>
+  <AlertDescription>Your connection is unstable. Changes may not be saved.</AlertDescription>
+</Alert>
+
+<!-- Success -->
+<Alert variant="success">
+  <CheckCircle2 className="h-4 w-4" />
+  <AlertTitle>Success</AlertTitle>
+  <AlertDescription>Your data has been successfully exported.</AlertDescription>
+</Alert>
+```
+
+Use alerts for persistent in-page messages. Use toast for ephemeral notifications.
+
+## Tooltip
+
+Hover hints for icons, truncated text, or abbreviated labels.
+
+```tsx
+<TooltipProvider>
+  <Tooltip>
+    <TooltipTrigger as-child>
+      <Button variant="ghost" size="icon">
+        <Settings className="w-4 h-4" />
+      </Button>
+    </TooltipTrigger>
+    <TooltipContent>
+      <p>Settings</p>
+    </TooltipContent>
+  </Tooltip>
+</TooltipProvider>
+```
+
+- Always wrap in `TooltipProvider` (can wrap the entire page once)
+- Use `as-child` on the trigger
+- Keep tooltip text short — 1-5 words
+- Essential for icon-only buttons (accessibility)
+
+## Popover
+
+Click-triggered floating panels for small forms or additional content.
+
+```tsx
+<Popover>
+  <PopoverTrigger as-child>
+    <Button variant="outline" size="sm">
+      <Filter className="w-4 h-4" /> Filter
+    </Button>
+  </PopoverTrigger>
+  <PopoverContent className="w-80" align="start">
+    <div className="space-y-4">
+      <h4 className="text-sm font-medium">Filter by</h4>
+      <!-- Filter controls -->
+    </div>
+  </PopoverContent>
+</Popover>
+```
+
+Use `align="start"` or `align="end"` to control alignment relative to trigger.
+
+## HoverCard
+
+Rich preview on hover. Use for user profiles, link previews.
+
+```tsx
+<HoverCard>
+  <HoverCardTrigger as-child>
+    <button className="text-sm font-medium underline decoration-dotted underline-offset-4">@sarah.chen</button>
+  </HoverCardTrigger>
+  <HoverCardContent className="w-80">
+    <div className="flex gap-4">
+      <!-- Avatar -->
+      <div className="w-10 h-10 rounded-full shrink-0 bg-gradient-to-br from-emerald-400 to-teal-600" />
+      <div className="space-y-1">
+        <h4 className="text-sm font-semibold">Sarah Chen</h4>
+        <p className="text-xs text-muted-foreground">Engineering Lead at Acme Inc.</p>
+        <p className="text-xs text-muted-foreground">Joined March 2023</p>
+      </div>
+    </div>
+  </HoverCardContent>
+</HoverCard>
+```
+
+## Progress
+
+Progress bar for completion tracking.
+
+```tsx
+<div className="space-y-2">
+  <div className="flex items-center justify-between text-sm">
+    <span className="font-medium">Upload progress</span>
+    <span className="text-muted-foreground">66%</span>
+  </div>
+  <Progress :model-value="66" className="h-2" />
+</div>
+```
+
+Use `className="h-2"` for standard height, `className="h-1"` for subtle/compact progress bars.
+
+## Toast
+
+Ephemeral notifications. Import `toast` function, not a component.
+
+```ts
+import { toast } from '@reinvented/design'
+
+// Success
+toast.success('Project created successfully')
+
+// Error with retry
+toast.error('Failed to save changes', {
+  action: { label: 'Retry', onClick: () => handleSave() }
+})
+
+// Promise-based (shows loading → success/error)
+toast.promise(saveData(), {
+  loading: 'Saving...',
+  success: 'Changes saved!',
+  error: 'Failed to save'
+})
+```
+
+### When to Use Toast vs Alert
+| Scenario | Use |
+|----------|-----|
+| Mutation success/failure | Toast |
+| Persistent warning in page content | Alert |
+| Action completed in background | Toast |
+| Page-level error blocking content | Alert |
+| Undo opportunity | Toast with action |

package/skills/components/form.md

@@ -0,0 +1,112 @@
+# Form Components
+
+Structured form layout with validation messaging.
+
+```ts
+import { Form, FormField, FormItem, FormLabel, FormControl, FormDescription, FormMessage } from '@reinvented/design'
+```
+
+## Form Field Pattern
+
+The standard pattern for form fields with label, input, description, and error message:
+
+```tsx
+<form className="space-y-4" @submit.prevent="handleSubmit">
+  <div className="space-y-2">
+    <Label for="name">Name</Label>
+    <Input id="name" defaultValue="form.name" placeholder="Your full name" />
+    <p className="text-xs text-muted-foreground">This will be displayed on your profile.</p>
+  </div>
+
+  <div className="space-y-2">
+    <Label for="email">Email</Label>
+    <Input id="email" type="email" defaultValue="form.email" placeholder="you@example.com" />
+  </div>
+
+  <div className="space-y-2">
+    <Label for="role">Role</Label>
+    <Select defaultValue="form.role">
+      <SelectTrigger>
+        <SelectValue placeholder="Select a role" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value="admin">Admin</SelectItem>
+        <SelectItem value="editor">Editor</SelectItem>
+        <SelectItem value="viewer">Viewer</SelectItem>
+      </SelectContent>
+    </Select>
+  </div>
+
+  <div className="flex justify-end gap-2 pt-4">
+    <Button variant="outline" type="button">Cancel</Button>
+    <Button type="submit" :disabled="saving">
+      <Loader2 v-if="saving" className="w-4 h-4 animate-spin" />
+      {{ saving ? 'Creating...' : 'Create' }}
+    </Button>
+  </div>
+</form>
+```
+
+## Form Layout Patterns
+
+### Single Column (Default)
+```tsx
+<div className="space-y-4 max-w-lg">
+  <!-- Fields stacked vertically with space-y-4 -->
+</div>
+```
+
+### Two-Column Grid
+For wider forms on desktop:
+```tsx
+<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+  <div className="space-y-2">
+    <Label>First Name</Label>
+    <Input defaultValue="form.firstName" />
+  </div>
+  <div className="space-y-2">
+    <Label>Last Name</Label>
+    <Input defaultValue="form.lastName" />
+  </div>
+</div>
+```
+
+### Grouped Sections
+For forms with logical groups:
+```tsx
+<div className="space-y-8">
+  <div className="space-y-4">
+    <div>
+      <h3 className="text-lg font-semibold">Personal Information</h3>
+      <p className="text-sm text-muted-foreground">Your basic profile details.</p>
+    </div>
+    <!-- Fields -->
+  </div>
+  <Separator />
+  <div className="space-y-4">
+    <div>
+      <h3 className="text-lg font-semibold">Preferences</h3>
+      <p className="text-sm text-muted-foreground">Customize your experience.</p>
+    </div>
+    <!-- Fields -->
+  </div>
+</div>
+```
+
+## Validation Display
+
+```tsx
+<!-- Error state on field -->
+<div className="space-y-2">
+  <Label for="email" className="text-destructive">Email</Label>
+  <Input id="email" defaultValue="form.email" className="border-destructive focus-visible:ring-destructive" />
+  <p className="text-xs text-destructive">Please enter a valid email address.</p>
+</div>
+```
+
+## Rules
+- **Field spacing**: `space-y-4` between fields, `space-y-2` within a field (label → input → message)
+- **Submit button**: Always rightmost in the button group, always shows loading state
+- **Cancel button**: Always `variant="outline"` and `type="button"` (prevents form submission)
+- **Required fields**: Mark optional fields with "(optional)" in the label, not required fields with asterisks
+- **Max width**: Forms should have `max-w-lg` or be inside a `Card` to prevent excessively wide inputs