@reinvented/design 1.0.0 → 1.2.0

package/src/components/ui/textarea.tsx

@@ -1,6 +1,6 @@
 import * as React from "react"
 
-import { cn } from "@/lib/utils"
+import { cn } from '../../lib/utils'
 
 const Textarea = React.forwardRef<
   HTMLTextAreaElement,

package/src/components/ui/toast.tsx

@@ -3,7 +3,7 @@ import * as ToastPrimitives from "@radix-ui/react-toast"
 import { cva, type VariantProps } from "class-variance-authority"
 import { X } from "lucide-react"
 
-import { cn } from "@/lib/utils"
+import { cn } from '../../lib/utils'
 
 const ToastProvider = ToastPrimitives.Provider
 

package/src/components/ui/toaster.tsx

@@ -6,7 +6,7 @@ import {
   ToastProvider,
   ToastTitle,
   ToastViewport,
-} from "@/components/ui/toast"
+} from './toast"
 
 export function Toaster() {
   const { toasts } = useToast()

package/src/components/ui/toggle-group.tsx

@@ -4,8 +4,8 @@ import * as React from "react"
 import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group"
 import { type VariantProps } from "class-variance-authority"
 
-import { cn } from "@/lib/utils"
-import { toggleVariants } from "@/components/ui/toggle"
+import { cn } from '../../lib/utils'
+import { toggleVariants } from './toggle"
 
 const ToggleGroupContext = React.createContext<
   VariantProps<typeof toggleVariants>

package/src/components/ui/toggle.tsx

@@ -4,7 +4,7 @@ import * as React from "react"
 import * as TogglePrimitive from "@radix-ui/react-toggle"
 import { cva, type VariantProps } from "class-variance-authority"
 
-import { cn } from "@/lib/utils"
+import { cn } from '../../lib/utils'
 
 const toggleVariants = cva(
   "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 gap-2",

package/src/components/ui/tooltip.tsx

@@ -1,7 +1,7 @@
 import * as React from "react"
 import * as TooltipPrimitive from "@radix-ui/react-tooltip"
 
-import { cn } from "@/lib/utils"
+import { cn } from '../../lib/utils'
 
 const TooltipProvider = TooltipPrimitive.Provider
 

package/src/hooks/use-toast.ts

@@ -6,7 +6,7 @@ import * as React from "react"
 import type {
   ToastActionElement,
   ToastProps,
-} from "@/components/ui/toast"
+} from '../components/ui/toast"
 
 const TOAST_LIMIT = 1
 const TOAST_REMOVE_DELAY = 1000000

package/src/styles/tokens.css

@@ -106,7 +106,7 @@
 .dark {
   --background: 240 10% 3.9%;
   --foreground: 0 0% 98%;
-  --card: 240 10% 3.9%;
+  --card: 240 10% 6.5%;       /* elevated surface — distinctly lighter than bg */
   --card-foreground: 0 0% 98%;
   --popover: 240 10% 3.9%;
   --popover-foreground: 0 0% 98%;

package/DESIGN_GUIDE.md

@@ -1,148 +0,0 @@
-# Reinvented Design Guide
-
-## Overview
-The Reinvented design system uses **Shadcn-vue** components with custom **Radix-vue** primitives,
-**Tailwind CSS** for styling, and **Lucide** icons. All UI surfaces share this consistent foundation.
-
----
-
-## Typography
-
-| Token          | Size   | Weight   | Use                    |
-|---------------|--------|----------|------------------------|
-| `text-xs`     | 12px   | 400      | Timestamps, captions   |
-| `text-sm`     | 14px   | 400–500  | Body text, labels      |
-| `text-base`   | 16px   | 400      | Default body           |
-| `text-lg`     | 18px   | 600      | Section headings       |
-| `text-xl`     | 20px   | 600      | Page subtitles         |
-| `text-2xl`    | 24px   | 700      | Page titles            |
-| `text-3xl`    | 30px   | 700      | Hero text              |
-
-**Font:** Inter (loaded via Google Fonts).
-**Line height:** Use `leading-tight` (1.25) for headings, `leading-normal` (1.5) for body.
-
----
-
-## Colors
-
-Our brand color is **purple** (`hsl(252 100% 63%)`).
-
-| Token            | Light             | Dark              | Use                    |
-|-----------------|-------------------|-------------------|------------------------|
-| `primary`       | Purple 63%        | Purple 69%        | Buttons, links, focus  |
-| `secondary`     | Zinc 96%          | Zinc 16%          | Secondary actions      |
-| `muted`         | Zinc 96%          | Zinc 16%          | Backgrounds, disabled  |
-| `destructive`   | Red 60%           | Red 31%           | Delete, errors         |
-| `success`       | Green 36%         | Green 45%         | Confirmations          |
-| `warning`       | Amber 50%         | Amber 55%         | Alerts                 |
-| `info`          | Blue 60%          | Blue 65%          | Information            |
-
-**Usage rules:**
-- Never hardcode colors — always use `hsl(var(--token))`
-- Use `text-muted-foreground` for secondary text (not arbitrary gray)
-- Apply `bg-card` for card surfaces, `bg-background` for page backgrounds
-
----
-
-## Spacing
-
-Based on **4px increments**. Use Tailwind utilities:
-
-| Class    | Value | Use                        |
-|----------|-------|----------------------------|
-| `gap-1`  | 4px   | Icon-to-text gap           |
-| `gap-2`  | 8px   | Between small elements     |
-| `gap-3`  | 12px  | Between form fields        |
-| `gap-4`  | 16px  | Section spacing            |
-| `gap-6`  | 24px  | Between major sections     |
-| `p-4`    | 16px  | Standard padding           |
-| `p-6`    | 24px  | Card padding               |
-| `px-4`   | 16px  | Page horizontal padding    |
-
-**Rules:**
-- Always use spacing tokens, never arbitrary values
-- Vertical rhythm: Use `gap-4` or `gap-6` for stacking sections
-- Horizontal rhythm: Use `gap-2` or `gap-3` for inline elements
-
----
-
-## Icons
-
-- **Library:** Lucide Vue Next (`lucide-vue-next`)
-- **NO emojis** anywhere in the UI
-- Default icon size: `16px` (`w-4 h-4`)
-- In buttons/nav: `w-4 h-4`
-- In empty states: `w-12 h-12` with `text-muted-foreground`
-- Always use `stroke-width="2"` (Lucide default)
-
----
-
-## Shadows & Borders
-
-| Token       | CSS                            | Use                        |
-|-------------|-------------------------------|----------------------------|
-| `shadow-sm` | Subtle 1px shadow             | Cards, buttons             |
-| `shadow-md` | Medium depth                  | Dropdowns, popovers        |
-| `shadow-lg` | Strong depth                  | Modals, dialogs            |
-| `rounded-md`| `calc(var(--radius) - 2px)`  | Inputs, small elements     |
-| `rounded-lg`| `var(--radius)` (10px)       | Cards, containers          |
-
----
-
-## Component Guidelines
-
-### When to use existing components
-Always check `@reinvented/design` first:
-```ts
-import { Button, Card, Input, Avatar, Badge } from '@reinvented/design'
-```
-
-### Using Radix primitives
-For Dialog, DropdownMenu, Tabs, Tooltip, PopoverSelect, etc.:
-```ts
-import { Dialog, DialogTrigger, DialogContent, DialogTitle } from '@reinvented/design'
-```
-Style them using `cn()` and Tailwind:
-```vue
-<DialogContent :class="cn('fixed inset-0 z-50 flex items-center justify-center')">
-```
-
-### Building new components
-1. Create in `packages/ds/src/components/ui/<name>/`
-2. Use `cn()` for class merging
-3. Accept `class` prop for customization
-4. Use design tokens (never hardcode colors)
-5. Export from barrel (`src/index.ts`)
-
----
-
-## Page Patterns
-
-Import from `@reinvented/design/patterns/*`:
-
-| Pattern       | Use                                          |
-|--------------|----------------------------------------------|
-| `ListView`   | Lists with search, filters, items            |
-| `DetailView` | Detail pages with hero, tabs, content        |
-| `FormView`   | Forms with validation and submit             |
-| `EmptyState` | Centered empty state with icon and CTA       |
-
----
-
-## Dark Mode
-
-- Controlled via `.dark` class on `<html>` or `<body>`
-- All tokens automatically switch in dark mode
-- Test both modes when building surfaces
-- Use `dark:` prefix sparingly — prefer CSS variable-driven theming
-
----
-
-## Do NOT
-
-- Use `alert()`, `confirm()`, or `prompt()` — use Dialog/AlertDialog
-- Use emojis — use Lucide icons
-- Hardcode colors — use CSS variables
-- Use arbitrary Tailwind values (e.g., `text-[#333]`) — use tokens
-- Create split-screen layouts — use single-column responsive design
-- Use `@apply` excessively — prefer utility classes in templates