@reinvented/design 0.1.0

package/README.md

@@ -0,0 +1,179 @@
+# @reinvented/design
+
+Opinionated design system for the Reinvented platform. Built on **Shadcn/ui + Radix + Tailwind CSS** with a **Linear-inspired** dark-first premium aesthetic.
+
+## Design Principles
+
+- **Dark-first** — Nearly-black backgrounds (`#0a0a0b`) with subtle surface elevation, not obvious cards
+- **Restrained palette** — Mostly grays with one accent color (violet-blue `#5b6af0`), used sparingly on interactive elements
+- **Muted borders** — No heavy shadows in dark mode; borders at 4–16% white opacity
+- **Tight typography** — Inter font, compact scale (11px–36px), 4 main text styles
+- **Smooth animations** — Subtle fade-in, slide-up, scale-in transitions (200ms default)
+- **Consistency-first** — Composition components with locked styling prevent visual drift
+
+## Installation
+
+```bash
+pnpm add @reinvented/design
+```
+
+Import CSS in your app entry:
+
+```tsx
+import "@reinvented/design/css";
+```
+
+## Usage
+
+### Primitives (flexible, accept className)
+
+```tsx
+import { Button, Input, Card, Badge, Dialog } from "@reinvented/design";
+
+<Button variant="primary" size="md">Save</Button>
+<Button variant="ghost" size="sm">Cancel</Button>
+<Input label="Email" placeholder="you@example.com" error="Required" />
+<Badge variant="success">Active</Badge>
+```
+
+### Composition Components (locked, no className)
+
+These are the **recommended API** — use them for guaranteed visual consistency:
+
+```tsx
+import { ContentCard, PageHeader, ListItem, FormSection, ActionBar, EmptyState } from "@reinvented/design";
+
+<PageHeader title="Settings" description="Manage your account" actions={<Button>Save</Button>} />
+
+<ContentCard title="Profile" description="Your personal information">
+  <Input label="Name" />
+</ContentCard>
+
+<ListItem
+  leading={<UserIcon size={16} />}
+  title="John Doe"
+  description="john@example.com"
+  trailing={<Badge>Admin</Badge>}
+  onClick={() => navigate("/users/1")}
+/>
+
+<EmptyState
+  icon={<InboxIcon size={32} />}
+  title="No items yet"
+  description="Create your first item to get started"
+  action={<Button>Create</Button>}
+/>
+```
+
+### Layout
+
+```tsx
+import { AppShell, TopBar, SideRail, SideRailItem, PageContainer } from "@reinvented/design";
+
+<AppShell
+  topBar={<TopBar brand={<Logo />} actions={<Avatar />} />}
+  sideRail={
+    <SideRail>
+      <SideRailItem active tooltip="Home"><HomeIcon size={18} /></SideRailItem>
+      <SideRailItem tooltip="Settings"><SettingsIcon size={18} /></SideRailItem>
+    </SideRail>
+  }
+>
+  <PageContainer>
+    {/* Page content */}
+  </PageContainer>
+</AppShell>
+```
+
+### Icons
+
+```tsx
+import { DynamicIcon, Settings, ChevronRight } from "@reinvented/design";
+
+// Static icon
+<Settings size={16} />
+
+// Dynamic icon by name string (for app manager)
+<DynamicIcon name="Settings" size={16} />
+```
+
+### Hooks
+
+```tsx
+import { useTheme, useMediaQuery } from "@reinvented/design";
+
+const { theme, toggleTheme, isDark } = useTheme();
+const isMobile = useMediaQuery("(max-width: 768px)");
+```
+
+### Utilities
+
+```tsx
+import { cn } from "@reinvented/design";
+
+<div className={cn("text-fg-primary", isActive && "text-accent")} />
+```
+
+### Command Palette
+
+```tsx
+import { CommandPalette, CommandGroup, CommandItem, CommandEmpty } from "@reinvented/design";
+
+<CommandPalette placeholder="Search or jump to…">
+  <CommandEmpty>No results found.</CommandEmpty>
+  <CommandGroup heading="Actions">
+    <CommandItem onSelect={() => navigate("/settings")}>Settings</CommandItem>
+  </CommandGroup>
+</CommandPalette>
+// Opens with Cmd+K / Ctrl+K
+```
+
+## Token Reference
+
+| Token | Dark Value | Purpose |
+|-------|-----------|---------|
+| `--bg-base` | `#0a0a0b` | App background |
+| `--bg-surface` | `#111113` | Cards, panels |
+| `--bg-elevated` | `#191a1f` | Dropdowns, popovers |
+| `--fg-primary` | `#ededef` | Primary text |
+| `--fg-secondary` | `#a1a1a6` | Secondary text |
+| `--fg-muted` | `#6e6e76` | Placeholder, hints |
+| `--accent` | `#5b6af0` | Interactive elements |
+| `--border-default` | `rgba(255,255,255,0.08)` | Standard borders |
+
+## Component Catalog
+
+### Primitives
+Button, Input, Badge, Avatar, Card, Label, Dialog, DropdownMenu, Toast, Separator, ScrollArea, Select, Switch, Checkbox, Tabs, Tooltip, Skeleton, Sheet
+
+### Composition (locked)
+ContentCard, PageHeader, ListItem, FormSection, ActionBar, EmptyState
+
+### Layout
+AppShell, TopBar, SideRail, BottomBar, PageContainer
+
+### Feedback & Overlays
+Spinner, ErrorBoundary, CommandPalette
+
+## Tailwind Config
+
+Consuming apps should extend the design system's Tailwind config:
+
+```ts
+// tailwind.config.ts in your app
+import designConfig from "@reinvented/design/tailwind";
+
+export default {
+  presets: [designConfig],
+  content: [
+    "./src/**/*.{ts,tsx}",
+    "../../packages/design/src/**/*.{ts,tsx}",
+  ],
+};
+```
+
+## Adding New Components
+
+1. Create the component in `src/components/`
+2. Export it from `src/index.ts`
+3. Run `pnpm build` to verify