@reinvented/design 0.1.0 → 0.2.1

package/docs/components/index.md

@@ -0,0 +1,69 @@
+# 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>
+```

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/conventions.md

@@ -0,0 +1,74 @@
+# UX Conventions
+
+Opinionated design decisions that ensure consistency across all Reinvented apps.
+
+## Create/Edit Flows
+
+| Scenario | Pattern | Why |
+|----------|---------|-----|
+| Simple form (≤ 5 fields) | Modal dialog | Fast, keeps context |
+| Medium form (6–8 fields) | Modal dialog with sections | Still fits in a modal |
+| Complex form (8+ fields) | Full page | Too much for a modal |
+| Rich content editing (markdown, images) | Full page | Needs space and toolbars |
+| Single-field update (e.g., rename) | Inline editing (click-to-edit) | Minimal friction |
+| Toggle/switch (enable/disable) | Inline toggle | Immediate feedback |
+| Status change | Inline dropdown or button group | Immediate feedback |
+
+**Default: modal.** Only escalate to full page when the modal becomes cramped.
+
+## Delete/Destructive Actions
+
+1. Always use `<AlertDialog>` with explicit confirmation
+2. Confirm button must say what it does: "Delete Task" not "OK"
+3. Cancel button is always the default focus
+4. Consider "undo via toast" for low-risk deletions instead of pre-confirmation
+
+## Navigation
+
+- **Back button**: Always present on detail views. Uses router history, not hardcoded routes
+- **Breadcrumbs**: Use on 3+ level deep hierarchies
+- **Tabs**: Use for related content within a single view (e.g., "Overview / Activity / Settings")
+- **Bottom navigation**: Mobile only, max 5 items
+
+## Information Hierarchy
+
+- **Page title**: `text-2xl font-bold` — one per page, describes the primary content
+- **Section headings**: `text-lg font-semibold` — group related content
+- **Cards**: Use to visually separate distinct content blocks
+- **Secondary text**: Always `text-muted-foreground`, never arbitrary gray
+
+## Empty States
+
+Every empty state must have:
+1. A relevant Lucide icon (`w-12 h-12 text-muted-foreground`)
+2. A title explaining what goes here
+3. A description explaining how to get started
+4. A primary CTA button
+
+## Loading States
+
+- **Page/section load**: Skeleton shapes matching the real content layout
+- **Button during mutation**: Spinner icon + disabled state
+- **Optimistic updates**: Use for toggles, status changes, likes — anything easily reversible
+- **Never**: bare spinner with no context. Always indicate WHAT is loading
+
+## Error States
+
+- **Query failures**: `<Alert variant="destructive">` with error message + retry button
+- **Mutation failures**: Toast notification with error message + retry action
+- **Form validation**: Inline field errors below the input, shown on blur or submit
+- **Network offline**: Banner at top of page
+
+## Responsive Behavior
+
+| Breakpoint | Width | Behavior |
+|------------|-------|----------|
+| Mobile | < 640px | Single column, bottom sheets, stacked cards |
+| Tablet | 640-1024px | Two columns possible, side panels collapse |
+| Desktop | > 1024px | Full layout, side panels open |
+
+## Consistency
+
+- Same object type → same card component everywhere
+- Same action → same pattern everywhere (e.g., all "delete" flows use AlertDialog)
+- Same icon → same meaning everywhere (e.g., Trash2 always means delete)

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