@reinvented/design 0.1.0 → 0.2.0

package/src/index.ts

@@ -0,0 +1,209 @@
+// ── @reinvented/design — Design System Barrel Export ──────────────
+// Re-exports all UI components, utils, and types
+
+// Utilities
+export { cn } from './lib/utils'
+
+// UI Components
+export { Button } from './components/ui/button'
+export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from './components/ui/card'
+export { Input } from './components/ui/input'
+export { Badge } from './components/ui/badge'
+export { Avatar } from './components/ui/avatar'
+export { Separator } from './components/ui/separator'
+export { Skeleton } from './components/ui/skeleton'
+export { ScrollArea } from './components/ui/scroll-area'
+
+// Re-export radix-vue primitives for advanced use
+// Consumers can build Dialog, DropdownMenu, Tabs, etc. using radix-vue directly
+// with our design tokens and cn() utility
+export {
+  DialogRoot as Dialog,
+  DialogTrigger,
+  DialogContent,
+  DialogTitle,
+  DialogDescription,
+  DialogClose,
+  DialogOverlay,
+  DialogPortal,
+} from 'radix-vue'
+
+export {
+  DropdownMenuRoot as DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuLabel,
+  DropdownMenuGroup,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuPortal,
+} from 'radix-vue'
+
+export {
+  TabsRoot as Tabs,
+  TabsList,
+  TabsTrigger,
+  TabsContent,
+} from 'radix-vue'
+
+export {
+  TooltipRoot as Tooltip,
+  TooltipTrigger,
+  TooltipContent,
+  TooltipProvider,
+  TooltipPortal,
+} from 'radix-vue'
+
+export {
+  PopoverRoot as Popover,
+  PopoverTrigger,
+  PopoverContent,
+  PopoverPortal,
+} from 'radix-vue'
+
+export {
+  SelectRoot as Select,
+  SelectTrigger,
+  SelectContent,
+  SelectItem,
+  SelectValue,
+  SelectGroup,
+  SelectLabel,
+  SelectSeparator,
+  SelectPortal,
+  SelectViewport,
+  SelectItemText,
+  SelectItemIndicator,
+} from 'radix-vue'
+
+export {
+  AccordionRoot as Accordion,
+  AccordionItem,
+  AccordionTrigger,
+  AccordionContent,
+  AccordionHeader,
+} from 'radix-vue'
+
+export {
+  SwitchRoot as Switch,
+  SwitchThumb,
+} from 'radix-vue'
+
+export {
+  CheckboxRoot as Checkbox,
+  CheckboxIndicator,
+} from 'radix-vue'
+
+export {
+  RadioGroupRoot as RadioGroup,
+  RadioGroupItem,
+  RadioGroupIndicator,
+} from 'radix-vue'
+
+export {
+  AlertDialogRoot as AlertDialog,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+} from 'radix-vue'
+
+export {
+  ProgressRoot as Progress,
+  ProgressIndicator,
+} from 'radix-vue'
+
+export {
+  SliderRoot as Slider,
+  SliderTrack,
+  SliderRange,
+  SliderThumb,
+} from 'radix-vue'
+
+export {
+  CollapsibleRoot as Collapsible,
+  CollapsibleTrigger,
+  CollapsibleContent,
+} from 'radix-vue'
+
+export {
+  ContextMenuRoot as ContextMenu,
+  ContextMenuTrigger,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuSeparator,
+  ContextMenuLabel,
+  ContextMenuGroup,
+  ContextMenuSub,
+  ContextMenuSubTrigger,
+  ContextMenuSubContent,
+  ContextMenuCheckboxItem,
+  ContextMenuRadioGroup,
+  ContextMenuRadioItem,
+  ContextMenuPortal,
+} from 'radix-vue'
+
+export {
+  MenubarRoot as Menubar,
+  MenubarMenu,
+  MenubarTrigger,
+  MenubarContent,
+  MenubarItem,
+  MenubarSeparator,
+  MenubarPortal,
+} from 'radix-vue'
+
+export {
+  ScrollAreaRoot,
+  ScrollAreaViewport,
+  ScrollAreaScrollbar,
+  ScrollAreaThumb,
+  ScrollAreaCorner,
+} from 'radix-vue'
+
+export {
+  NavigationMenuRoot as NavigationMenu,
+  NavigationMenuList,
+  NavigationMenuItem,
+  NavigationMenuTrigger,
+  NavigationMenuContent,
+  NavigationMenuLink,
+  NavigationMenuViewport,
+  NavigationMenuIndicator,
+} from 'radix-vue'
+
+export {
+  HoverCardRoot as HoverCard,
+  HoverCardTrigger,
+  HoverCardContent,
+  HoverCardPortal,
+} from 'radix-vue'
+
+export {
+  ToggleGroupRoot as ToggleGroup,
+  ToggleGroupItem,
+} from 'radix-vue'
+
+export {
+  PaginationRoot as Pagination,
+  PaginationList,
+  PaginationListItem,
+  PaginationFirst,
+  PaginationPrev,
+  PaginationNext,
+  PaginationLast,
+  PaginationEllipsis,
+} from 'radix-vue'
+
+// External library re-exports
+export { Toaster, toast } from 'vue-sonner'

package/src/lib/utils.ts

@@ -0,0 +1,7 @@
+import type { ClassValue } from 'clsx'
+import { clsx } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

package/src/patterns/DetailView.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+/**
+ * DetailView Pattern
+ * A detail page with hero/header + content sections.
+ * Use for: Circle detail, Event detail, Profile, App detail.
+ */
+import { type HTMLAttributes } from 'vue'
+import { cn } from '../../lib/utils'
+
+interface Props {
+  title?: string
+  subtitle?: string
+  class?: HTMLAttributes['class']
+}
+defineProps<Props>()
+</script>
+
+<template>
+  <div :class="cn('flex flex-col h-full', props.class)">
+    <!-- Back navigation -->
+    <div class="flex items-center gap-2 px-4 py-2 border-b">
+      <slot name="back-button" />
+      <slot name="breadcrumb" />
+      <div class="flex-1" />
+      <slot name="header-actions" />
+    </div>
+
+    <!-- Hero / Header section -->
+    <div class="px-4 py-6 border-b">
+      <slot name="hero">
+        <h1 v-if="title" class="text-2xl font-bold">{{ title }}</h1>
+        <p v-if="subtitle" class="text-muted-foreground mt-1">{{ subtitle }}</p>
+      </slot>
+    </div>
+
+    <!-- Tabs / navigation -->
+    <div v-if="$slots['tabs']" class="px-4 border-b">
+      <slot name="tabs" />
+    </div>
+
+    <!-- Main content -->
+    <div class="flex-1 overflow-auto px-4 py-4">
+      <slot />
+    </div>
+  </div>
+</template>

package/src/patterns/EmptyState.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+/**
+ * EmptyState Pattern
+ * A centered, friendly empty state with icon, title, description, and CTA.
+ * Use when a list/section has no data.
+ */
+import { type HTMLAttributes } from 'vue'
+import { cn } from '../../lib/utils'
+
+interface Props {
+  title: string
+  description?: string
+  class?: HTMLAttributes['class']
+}
+defineProps<Props>()
+</script>
+
+<template>
+  <div :class="cn('flex flex-col items-center justify-center text-center py-12 px-4', props.class)">
+    <div v-if="$slots['icon']" class="mb-4 text-muted-foreground">
+      <slot name="icon" />
+    </div>
+    <h3 class="text-lg font-semibold mb-1">{{ title }}</h3>
+    <p v-if="description" class="text-sm text-muted-foreground max-w-sm mb-4">{{ description }}</p>
+    <slot name="action" />
+  </div>
+</template>

package/src/patterns/FormView.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+/**
+ * FormView Pattern
+ * A form page/dialog with sections, validation, and submit.
+ * Use for: Settings, Profile edit, Create event, etc.
+ */
+import { type HTMLAttributes } from 'vue'
+import { cn } from '../../lib/utils'
+
+interface Props {
+  title?: string
+  description?: string
+  class?: HTMLAttributes['class']
+}
+defineProps<Props>()
+const emit = defineEmits<{ submit: [] }>()
+</script>
+
+<template>
+  <form :class="cn('flex flex-col gap-6', props.class)" @submit.prevent="emit('submit')">
+    <div v-if="title" class="space-y-1">
+      <h2 class="text-xl font-semibold">{{ title }}</h2>
+      <p v-if="description" class="text-sm text-muted-foreground">{{ description }}</p>
+    </div>
+
+    <!-- Form sections -->
+    <slot />
+
+    <!-- Actions -->
+    <div v-if="$slots['actions']" class="flex items-center justify-end gap-2 pt-4 border-t">
+      <slot name="actions" />
+    </div>
+  </form>
+</template>

package/src/patterns/ListView.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+/**
+ * ListView Pattern
+ * A standard list page with search, filters, and items.
+ * Use for: Circles list, Friends list, Notifications, App Store browse.
+ */
+import { type HTMLAttributes } from 'vue'
+import { cn } from '../../lib/utils'
+
+interface Props {
+  title?: string
+  class?: HTMLAttributes['class']
+}
+defineProps<Props>()
+</script>
+
+<template>
+  <div :class="cn('flex flex-col h-full', props.class)">
+    <!-- Header with title and actions -->
+    <div class="flex items-center justify-between px-4 py-3 border-b">
+      <h1 v-if="title" class="text-xl font-semibold">{{ title }}</h1>
+      <slot name="header-actions" />
+    </div>
+
+    <!-- Search / Filter Bar -->
+    <div v-if="$slots['search']" class="px-4 py-2 border-b bg-muted/30">
+      <slot name="search" />
+    </div>
+
+    <!-- Filter Tabs -->
+    <div v-if="$slots['filters']" class="px-4 py-2 border-b">
+      <slot name="filters" />
+    </div>
+
+    <!-- List content -->
+    <div class="flex-1 overflow-auto">
+      <slot />
+    </div>
+
+    <!-- Empty state -->
+    <div v-if="$slots['empty']" class="flex-1 flex items-center justify-center p-8">
+      <slot name="empty" />
+    </div>
+  </div>
+</template>

package/src/styles/index.css

@@ -0,0 +1,4 @@
+@import './tokens.css';
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

package/src/styles/tokens.css

@@ -0,0 +1,144 @@
+/* ============================================================
+   Reinvented Design Tokens
+   ============================================================
+   Brand-first design system using CSS custom properties.
+   Import this file in your app's root CSS.
+   ============================================================ */
+
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
+
+:root {
+  /* ── Brand Colors ──────────────────────────────────────────── */
+  --background: 0 0% 100%;
+  --foreground: 240 10% 3.9%;
+  --card: 0 0% 100%;
+  --card-foreground: 240 10% 3.9%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 240 10% 3.9%;
+  --primary: 252 100% 63%;        /* Vibrant purple — Reinvented brand */
+  --primary-foreground: 0 0% 100%;
+  --secondary: 240 4.8% 95.9%;
+  --secondary-foreground: 240 5.9% 10%;
+  --muted: 240 4.8% 95.9%;
+  --muted-foreground: 240 3.8% 46.1%;
+  --accent: 240 4.8% 95.9%;
+  --accent-foreground: 240 5.9% 10%;
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 0 0% 98%;
+  --border: 240 5.9% 90%;
+  --input: 240 5.9% 90%;
+  --ring: 252 100% 63%;
+  --radius: 0.625rem;
+
+  /* ── Success / Warning / Info ──────────────────────────────── */
+  --success: 142 76% 36%;
+  --success-foreground: 0 0% 100%;
+  --warning: 38 92% 50%;
+  --warning-foreground: 0 0% 100%;
+  --info: 217 91% 60%;
+  --info-foreground: 0 0% 100%;
+
+  /* ── Typography ────────────────────────────────────────────── */
+  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
+
+  /* ── Spacing Scale (4px base) ──────────────────────────────── */
+  --space-0: 0;
+  --space-1: 0.25rem;   /* 4px */
+  --space-2: 0.5rem;    /* 8px */
+  --space-3: 0.75rem;   /* 12px */
+  --space-4: 1rem;      /* 16px */
+  --space-5: 1.25rem;   /* 20px */
+  --space-6: 1.5rem;    /* 24px */
+  --space-8: 2rem;      /* 32px */
+  --space-10: 2.5rem;   /* 40px */
+  --space-12: 3rem;     /* 48px */
+  --space-16: 4rem;     /* 64px */
+
+  /* ── Typography Scale ──────────────────────────────────────── */
+  --text-xs: 0.75rem;     /* 12px */
+  --text-sm: 0.875rem;    /* 14px */
+  --text-base: 1rem;      /* 16px */
+  --text-lg: 1.125rem;    /* 18px */
+  --text-xl: 1.25rem;     /* 20px */
+  --text-2xl: 1.5rem;     /* 24px */
+  --text-3xl: 1.875rem;   /* 30px */
+  --text-4xl: 2.25rem;    /* 36px */
+
+  --leading-tight: 1.25;
+  --leading-normal: 1.5;
+  --leading-relaxed: 1.625;
+
+  /* ── Shadows ───────────────────────────────────────────────── */
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+
+  /* ── Transitions ───────────────────────────────────────────── */
+  --duration-fast: 100ms;
+  --duration-normal: 200ms;
+  --duration-slow: 300ms;
+  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
+  --ease-in: cubic-bezier(0.4, 0, 1, 1);
+  --ease-out: cubic-bezier(0, 0, 0.2, 1);
+
+  /* ── Sidebar (for ShadCN sidebar component) ────────────────── */
+  --sidebar-background: 0 0% 98%;
+  --sidebar-foreground: 240 5.3% 26.1%;
+  --sidebar-primary: 252 100% 63%;
+  --sidebar-primary-foreground: 0 0% 100%;
+  --sidebar-accent: 240 4.8% 95.9%;
+  --sidebar-accent-foreground: 240 5.9% 10%;
+  --sidebar-border: 220 13% 91%;
+  --sidebar-ring: 252 100% 63%;
+}
+
+/* ── Dark Mode ───────────────────────────────────────────────── */
+.dark {
+  --background: 240 10% 3.9%;
+  --foreground: 0 0% 98%;
+  --card: 240 10% 3.9%;
+  --card-foreground: 0 0% 98%;
+  --popover: 240 10% 3.9%;
+  --popover-foreground: 0 0% 98%;
+  --primary: 252 100% 69%;
+  --primary-foreground: 0 0% 100%;
+  --secondary: 240 3.7% 15.9%;
+  --secondary-foreground: 0 0% 98%;
+  --muted: 240 3.7% 15.9%;
+  --muted-foreground: 240 5% 64.9%;
+  --accent: 240 3.7% 15.9%;
+  --accent-foreground: 0 0% 98%;
+  --destructive: 0 62.8% 30.6%;
+  --destructive-foreground: 0 0% 98%;
+  --border: 240 3.7% 15.9%;
+  --input: 240 3.7% 15.9%;
+  --ring: 252 100% 69%;
+
+  --success: 142 76% 45%;
+  --warning: 38 92% 55%;
+  --info: 217 91% 65%;
+
+  --sidebar-background: 240 5.9% 10%;
+  --sidebar-foreground: 240 4.8% 95.9%;
+  --sidebar-primary: 252 100% 69%;
+  --sidebar-primary-foreground: 0 0% 100%;
+  --sidebar-accent: 240 3.7% 15.9%;
+  --sidebar-accent-foreground: 240 4.8% 95.9%;
+  --sidebar-border: 240 3.7% 15.9%;
+  --sidebar-ring: 252 100% 69%;
+}
+
+/* ── Base Styles ─────────────────────────────────────────────── */
+* {
+  border-color: hsl(var(--border));
+}
+
+body {
+  font-family: var(--font-sans);
+  background-color: hsl(var(--background));
+  color: hsl(var(--foreground));
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}

package/tailwind.config.js

@@ -0,0 +1,108 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  darkMode: 'class',
+  content: [
+    './src/**/*.{vue,ts,tsx}',
+    // Consumer apps should add their own content paths
+  ],
+  theme: {
+    container: {
+      center: true,
+      padding: '2rem',
+      screens: { '2xl': '1400px' },
+    },
+    extend: {
+      colors: {
+        border: 'hsl(var(--border))',
+        input: 'hsl(var(--input))',
+        ring: 'hsl(var(--ring))',
+        background: 'hsl(var(--background))',
+        foreground: 'hsl(var(--foreground))',
+        primary: {
+          DEFAULT: 'hsl(var(--primary))',
+          foreground: 'hsl(var(--primary-foreground))',
+        },
+        secondary: {
+          DEFAULT: 'hsl(var(--secondary))',
+          foreground: 'hsl(var(--secondary-foreground))',
+        },
+        destructive: {
+          DEFAULT: 'hsl(var(--destructive))',
+          foreground: 'hsl(var(--destructive-foreground))',
+        },
+        muted: {
+          DEFAULT: 'hsl(var(--muted))',
+          foreground: 'hsl(var(--muted-foreground))',
+        },
+        accent: {
+          DEFAULT: 'hsl(var(--accent))',
+          foreground: 'hsl(var(--accent-foreground))',
+        },
+        popover: {
+          DEFAULT: 'hsl(var(--popover))',
+          foreground: 'hsl(var(--popover-foreground))',
+        },
+        card: {
+          DEFAULT: 'hsl(var(--card))',
+          foreground: 'hsl(var(--card-foreground))',
+        },
+        success: {
+          DEFAULT: 'hsl(var(--success))',
+          foreground: 'hsl(var(--success-foreground))',
+        },
+        warning: {
+          DEFAULT: 'hsl(var(--warning))',
+          foreground: 'hsl(var(--warning-foreground))',
+        },
+        info: {
+          DEFAULT: 'hsl(var(--info))',
+          foreground: 'hsl(var(--info-foreground))',
+        },
+        sidebar: {
+          DEFAULT: 'hsl(var(--sidebar-background))',
+          foreground: 'hsl(var(--sidebar-foreground))',
+          primary: 'hsl(var(--sidebar-primary))',
+          'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
+          accent: 'hsl(var(--sidebar-accent))',
+          'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
+          border: 'hsl(var(--sidebar-border))',
+          ring: 'hsl(var(--sidebar-ring))',
+        },
+      },
+      borderRadius: {
+        lg: 'var(--radius)',
+        md: 'calc(var(--radius) - 2px)',
+        sm: 'calc(var(--radius) - 4px)',
+      },
+      fontFamily: {
+        sans: ['var(--font-sans)'],
+        mono: ['var(--font-mono)'],
+      },
+      keyframes: {
+        'accordion-down': {
+          from: { height: '0' },
+          to: { height: 'var(--radix-accordion-content-height)' },
+        },
+        'accordion-up': {
+          from: { height: 'var(--radix-accordion-content-height)' },
+          to: { height: '0' },
+        },
+        'collapsible-down': {
+          from: { height: '0' },
+          to: { height: 'var(--radix-collapsible-content-height)' },
+        },
+        'collapsible-up': {
+          from: { height: 'var(--radix-collapsible-content-height)' },
+          to: { height: '0' },
+        },
+      },
+      animation: {
+        'accordion-down': 'accordion-down 0.2s ease-out',
+        'accordion-up': 'accordion-up 0.2s ease-out',
+        'collapsible-down': 'collapsible-down 0.2s ease-out',
+        'collapsible-up': 'collapsible-up 0.2s ease-out',
+      },
+    },
+  },
+  plugins: [require('tailwindcss-animate')],
+}

package/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": "."
+  },
+  "include": ["src/**/*.ts", "src/**/*.vue"]
+}