@otfdashkit/ui 0.1.0

package/src/blocks/sidebar-layout-minimal.tsx

@@ -0,0 +1,73 @@
+// @ts-nocheck
+import React from 'react'
+import { LayoutDashboard, FolderOpen, Users, Settings } from 'lucide-react'
+import { cn } from '../utils/cn'
+import { Avatar, AvatarFallback } from '../primitives/avatar'
+import { Separator } from '../primitives/separator'
+
+const NAV_ITEMS = [
+  { icon: LayoutDashboard, label: 'Dashboard', active: true },
+  { icon: FolderOpen, label: 'Projects' },
+  { icon: Users, label: 'Team' },
+  { icon: Settings, label: 'Settings' },
+]
+
+interface NavItemProps { icon: React.ElementType; label: string; active?: boolean }
+
+function NavItem({ icon: Icon, label, active }: NavItemProps) {
+  return (
+    <button className={cn(
+      'flex w-full items-center gap-3 rounded-md px-3 py-2 text-sm transition-colors',
+      active
+        ? 'bg-[hsl(var(--accent))] text-[hsl(var(--accent-foreground))] font-medium'
+        : 'text-[hsl(var(--muted-foreground))] hover:bg-[hsl(var(--accent))] hover:text-[hsl(var(--accent-foreground))]'
+    )}>
+      <Icon className="h-4 w-4 shrink-0" />
+      {label}
+    </button>
+  )
+}
+
+export interface SidebarLayoutMinimalProps {
+  brandName?: string
+  pageTitle?: string
+  children?: React.ReactNode
+  className?: string
+}
+
+export function SidebarLayoutMinimal({
+  brandName = 'Acme Inc',
+  pageTitle = 'Dashboard',
+  children,
+  className,
+}: SidebarLayoutMinimalProps) {
+  return (
+    <div className={cn('flex h-[600px] overflow-hidden rounded-md border border-[hsl(var(--border))] bg-[hsl(var(--background))]', className)}>
+      <aside className="flex w-60 flex-col border-r border-[hsl(var(--border))] bg-[hsl(var(--card))]">
+        <div className="flex h-14 items-center px-4 font-semibold text-sm">{brandName}</div>
+        <Separator />
+        <nav className="flex-1 space-y-0.5 p-2">
+          {NAV_ITEMS.map(item => <NavItem key={item.label} {...item} />)}
+        </nav>
+        <Separator />
+        <div className="flex items-center gap-3 p-4">
+          <Avatar className="h-8 w-8">
+            <AvatarFallback className="text-xs">JD</AvatarFallback>
+          </Avatar>
+          <div className="min-w-0">
+            <p className="truncate text-sm font-medium">Jane Doe</p>
+            <p className="truncate text-xs text-[hsl(var(--muted-foreground))]">jane@acme.com</p>
+          </div>
+        </div>
+      </aside>
+      <main className="flex flex-1 flex-col overflow-auto">
+        <header className="flex h-14 items-center border-b border-[hsl(var(--border))] px-6">
+          <h1 className="text-sm font-semibold">{pageTitle}</h1>
+        </header>
+        <div className="flex-1 p-6 text-sm text-[hsl(var(--muted-foreground))]">
+          {children ?? 'Page content goes here.'}
+        </div>
+      </main>
+    </div>
+  )
+}

package/src/blocks/sidebar-layout-search.tsx

@@ -0,0 +1,79 @@
+// @ts-nocheck
+import React, { useState } from 'react'
+import { LayoutDashboard, FolderOpen, Users, Settings, BarChart2, Bell } from 'lucide-react'
+import { cn } from '../utils/cn'
+import { Input } from '../primitives/input'
+import { Separator } from '../primitives/separator'
+
+const ALL_ITEMS = [
+  { icon: LayoutDashboard, label: 'Dashboard', active: true },
+  { icon: BarChart2, label: 'Analytics' },
+  { icon: FolderOpen, label: 'Projects' },
+  { icon: Users, label: 'Team' },
+  { icon: Bell, label: 'Notifications' },
+  { icon: Settings, label: 'Settings' },
+]
+
+interface NavItemProps { icon: React.ElementType; label: string; active?: boolean }
+
+function NavItem({ icon: Icon, label, active }: NavItemProps) {
+  return (
+    <button className={cn(
+      'flex w-full items-center gap-3 rounded-md px-3 py-2 text-sm transition-colors',
+      active
+        ? 'bg-[hsl(var(--accent))] text-[hsl(var(--accent-foreground))] font-medium'
+        : 'text-[hsl(var(--muted-foreground))] hover:bg-[hsl(var(--accent))] hover:text-[hsl(var(--accent-foreground))]'
+    )}>
+      <Icon className="h-4 w-4 shrink-0" />
+      {label}
+    </button>
+  )
+}
+
+export interface SidebarLayoutSearchProps {
+  brandName?: string
+  pageTitle?: string
+  children?: React.ReactNode
+  className?: string
+}
+
+export function SidebarLayoutSearch({
+  brandName = 'Acme Inc',
+  pageTitle = 'Dashboard',
+  children,
+  className,
+}: SidebarLayoutSearchProps) {
+  const [query, setQuery] = useState('')
+  const filtered = ALL_ITEMS.filter(i => i.label.toLowerCase().includes(query.toLowerCase()))
+
+  return (
+    <div className={cn('flex h-[600px] overflow-hidden rounded-md border border-[hsl(var(--border))] bg-[hsl(var(--background))]', className)}>
+      <aside className="flex w-60 flex-col border-r border-[hsl(var(--border))] bg-[hsl(var(--card))]">
+        <div className="flex h-14 items-center px-4 font-semibold text-sm">{brandName}</div>
+        <Separator />
+        <div className="p-2">
+          <Input
+            placeholder="Search..."
+            value={query}
+            onChange={e => setQuery(e.target.value)}
+            className="h-8 text-sm"
+          />
+        </div>
+        <nav className="flex-1 space-y-0.5 overflow-auto p-2">
+          {filtered.length > 0
+            ? filtered.map(item => <NavItem key={item.label} {...item} />)
+            : <p className="px-3 py-2 text-xs text-[hsl(var(--muted-foreground))]">No results</p>
+          }
+        </nav>
+      </aside>
+      <main className="flex flex-1 flex-col overflow-auto">
+        <header className="flex h-14 items-center border-b border-[hsl(var(--border))] px-6">
+          <h1 className="text-sm font-semibold">{pageTitle}</h1>
+        </header>
+        <div className="flex-1 p-6 text-sm text-[hsl(var(--muted-foreground))]">
+          {children ?? 'Page content goes here.'}
+        </div>
+      </main>
+    </div>
+  )
+}

package/src/blocks/sidebar-layout-user.tsx

@@ -0,0 +1,82 @@
+// @ts-nocheck
+import React from 'react'
+import { LayoutDashboard, FolderOpen, Users, Settings, Bell } from 'lucide-react'
+import { cn } from '../utils/cn'
+import { Avatar, AvatarFallback } from '../primitives/avatar'
+import { Badge } from '../primitives/badge'
+import { Separator } from '../primitives/separator'
+
+const NAV_ITEMS = [
+  { icon: LayoutDashboard, label: 'Dashboard', active: true },
+  { icon: FolderOpen, label: 'Projects' },
+  { icon: Users, label: 'Team' },
+  { icon: Bell, label: 'Notifications', badge: '3' },
+  { icon: Settings, label: 'Settings' },
+]
+
+interface NavItemProps { icon: React.ElementType; label: string; active?: boolean; badge?: string }
+
+function NavItem({ icon: Icon, label, active, badge }: NavItemProps) {
+  return (
+    <button className={cn(
+      'flex w-full items-center gap-3 rounded-md px-3 py-2 text-sm transition-colors',
+      active
+        ? 'bg-[hsl(var(--accent))] text-[hsl(var(--accent-foreground))] font-medium'
+        : 'text-[hsl(var(--muted-foreground))] hover:bg-[hsl(var(--accent))] hover:text-[hsl(var(--accent-foreground))]'
+    )}>
+      <Icon className="h-4 w-4 shrink-0" />
+      <span className="flex-1 text-left">{label}</span>
+      {badge && <Badge className="text-[10px] px-1.5 py-0.5 shrink-0">{badge}</Badge>}
+    </button>
+  )
+}
+
+export interface SidebarLayoutUserProps {
+  userName?: string
+  userEmail?: string
+  userRole?: string
+  pageTitle?: string
+  children?: React.ReactNode
+  className?: string
+}
+
+export function SidebarLayoutUser({
+  userName = 'Jane Doe',
+  userEmail = 'jane@acme.com',
+  userRole = 'Admin',
+  pageTitle = 'Dashboard',
+  children,
+  className,
+}: SidebarLayoutUserProps) {
+  return (
+    <div className={cn('flex h-[600px] overflow-hidden rounded-md border border-[hsl(var(--border))] bg-[hsl(var(--background))]', className)}>
+      <aside className="flex w-60 flex-col border-r border-[hsl(var(--border))] bg-[hsl(var(--card))]">
+        <div className="p-4">
+          <div className="flex items-center gap-3 rounded-md bg-[hsl(var(--accent))] p-3">
+            <Avatar className="h-9 w-9">
+              <AvatarFallback className="text-xs">{userName.slice(0, 2).toUpperCase()}</AvatarFallback>
+            </Avatar>
+            <div className="min-w-0">
+              <p className="truncate text-sm font-semibold">{userName}</p>
+              <p className="truncate text-xs text-[hsl(var(--muted-foreground))]">{userRole}</p>
+            </div>
+          </div>
+        </div>
+        <Separator />
+        <nav className="flex-1 space-y-0.5 p-2">
+          {NAV_ITEMS.map(item => <NavItem key={item.label} {...item} />)}
+        </nav>
+        <Separator />
+        <p className="p-4 text-xs text-[hsl(var(--muted-foreground))] truncate">{userEmail}</p>
+      </aside>
+      <main className="flex flex-1 flex-col overflow-auto">
+        <header className="flex h-14 items-center border-b border-[hsl(var(--border))] px-6">
+          <h1 className="text-sm font-semibold">{pageTitle}</h1>
+        </header>
+        <div className="flex-1 p-6 text-sm text-[hsl(var(--muted-foreground))]">
+          {children ?? 'Page content goes here.'}
+        </div>
+      </main>
+    </div>
+  )
+}

package/src/blocks/sortable-task-list.tsx

@@ -0,0 +1,70 @@
+import React, { useState } from 'react'
+import { cn } from '../utils/cn'
+import { Checkbox } from '../primitives/checkbox'
+import { Avatar, AvatarFallback } from '../primitives/avatar'
+
+type Priority = 'High' | 'Medium' | 'Low'
+type Status = 'In Progress' | 'Todo' | 'Done'
+
+interface Task {
+  id: string
+  title: string
+  assignee: string
+  priority: Priority
+  status: Status
+  done: boolean
+}
+
+const TASKS: Task[] = [
+  { id: '1', title: 'Redesign onboarding flow', assignee: 'AC', priority: 'High', status: 'In Progress', done: false },
+  { id: '2', title: 'Fix authentication bug', assignee: 'BS', priority: 'High', status: 'In Progress', done: false },
+  { id: '3', title: 'Write API documentation', assignee: 'JD', priority: 'Medium', status: 'Todo', done: false },
+  { id: '4', title: 'Add dark mode support', assignee: 'TR', priority: 'Low', status: 'Todo', done: false },
+  { id: '5', title: 'Setup CI/CD pipeline', assignee: 'SK', priority: 'Medium', status: 'Done', done: true },
+  { id: '6', title: 'Deploy to staging', assignee: 'ML', priority: 'Low', status: 'Done', done: true },
+]
+
+const PRIORITY_DOT: Record<Priority, string> = {
+  High: 'bg-red-500',
+  Medium: 'bg-yellow-500',
+  Low: 'bg-green-500',
+}
+
+const SECTIONS: Status[] = ['In Progress', 'Todo', 'Done']
+
+function TaskRow({ task, onToggle }: { task: Task; onToggle: () => void }) {
+  return (
+    <div className="flex items-center gap-3 px-3 py-2.5 hover:bg-[hsl(var(--accent)/0.5)] rounded-md transition-colors">
+      <Checkbox checked={task.done} onCheckedChange={onToggle} />
+      <span className={cn('flex-1 text-sm', task.done && 'line-through text-[hsl(var(--muted-foreground))]')}>{task.title}</span>
+      <span className={cn('h-2 w-2 rounded-full shrink-0', PRIORITY_DOT[task.priority])} title={task.priority} />
+      <Avatar className="h-6 w-6 shrink-0"><AvatarFallback className="text-[10px]">{task.assignee}</AvatarFallback></Avatar>
+    </div>
+  )
+}
+
+export interface SortableTaskListProps { className?: string }
+
+export function SortableTaskList({ className }: SortableTaskListProps) {
+  const [tasks, setTasks] = useState(TASKS)
+  const toggle = (id: string) => setTasks(ts => ts.map(t => t.id === id ? { ...t, done: !t.done } : t))
+
+  return (
+    <div className={cn('rounded-md border border-[hsl(var(--border))] bg-[hsl(var(--card))] p-4 space-y-4', className)}>
+      {SECTIONS.map(section => {
+        const items = tasks.filter(t => t.status === section)
+        return (
+          <div key={section}>
+            <div className="flex items-center gap-2 mb-1.5">
+              <p className="text-xs font-semibold text-[hsl(var(--muted-foreground))] uppercase tracking-wide">{section}</p>
+              <span className="text-xs text-[hsl(var(--muted-foreground))]">({items.length})</span>
+            </div>
+            <div className="space-y-0.5">
+              {items.map(task => <TaskRow key={task.id} task={task} onToggle={() => toggle(task.id)} />)}
+            </div>
+          </div>
+        )
+      })}
+    </div>
+  )
+}

package/src/blocks/stacked-layout-branded.tsx

@@ -0,0 +1,64 @@
+import React from 'react'
+import { Bell, ChevronDown, ArrowRight } from 'lucide-react'
+import { cn } from '../utils/cn'
+import { Avatar, AvatarFallback } from '../primitives/avatar'
+import { Button } from '../primitives/button'
+import { Card, CardContent, CardHeader, CardTitle } from '../primitives/card'
+
+const NAV_LINKS = ['Features', 'Pricing', 'Docs', 'Blog']
+
+export interface StackedLayoutBrandedProps {
+  brandName?: string
+  children?: React.ReactNode
+  className?: string
+}
+
+export function StackedLayoutBranded({
+  brandName = 'Acme',
+  children,
+  className,
+}: StackedLayoutBrandedProps) {
+  return (
+    <div className={cn('flex h-[600px] flex-col overflow-hidden rounded-md border border-[hsl(var(--border))] bg-[hsl(var(--background))]', className)}>
+      <nav className="flex h-14 items-center gap-6 bg-[hsl(var(--primary))] px-6">
+        <span className="font-bold text-sm text-[hsl(var(--primary-foreground))] shrink-0">{brandName}</span>
+        <div className="flex flex-1 items-center gap-1">
+          {NAV_LINKS.map(link => (
+            <button key={link} className="px-3 py-1.5 text-sm text-[hsl(var(--primary-foreground)/0.8)] hover:text-[hsl(var(--primary-foreground))] transition-colors rounded-md hover:bg-white/10">
+              {link}
+            </button>
+          ))}
+        </div>
+        <div className="flex items-center gap-3">
+          <Bell className="h-4 w-4 text-[hsl(var(--primary-foreground)/0.8)]" />
+          <div className="flex items-center gap-1.5 cursor-pointer">
+            <Avatar className="h-7 w-7 ring-2 ring-white/30">
+              <AvatarFallback className="bg-white/20 text-[hsl(var(--primary-foreground))] text-xs">JD</AvatarFallback>
+            </Avatar>
+            <ChevronDown className="h-3 w-3 text-[hsl(var(--primary-foreground)/0.8)]" />
+          </div>
+        </div>
+      </nav>
+      <main className="flex-1 overflow-auto">
+        {children ?? (
+          <div className="p-6 space-y-6">
+            <div>
+              <h1 className="text-xl font-bold">Welcome back, Jane</h1>
+              <p className="text-sm text-[hsl(var(--muted-foreground))] mt-1">Here's what's happening today.</p>
+            </div>
+            <div className="grid gap-4" style={{ gridTemplateColumns: 'repeat(auto-fill, minmax(min(100%,200px),1fr))' }}>
+              {['Get Started', 'View Analytics', 'Manage Team'].map(action => (
+                <Card key={action} className="cursor-pointer hover:shadow-md transition-shadow">
+                  <CardContent className="p-4 flex items-center justify-between">
+                    <span className="text-sm font-medium">{action}</span>
+                    <ArrowRight className="h-4 w-4 text-[hsl(var(--muted-foreground))]" />
+                  </CardContent>
+                </Card>
+              ))}
+            </div>
+          </div>
+        )}
+      </main>
+    </div>
+  )
+}

package/src/blocks/stacked-layout-tabs.tsx

@@ -0,0 +1,80 @@
+import React, { useState } from 'react'
+import { Bell, ChevronDown } from 'lucide-react'
+import { cn } from '../utils/cn'
+import { Avatar, AvatarFallback } from '../primitives/avatar'
+import { Button } from '../primitives/button'
+import { Separator } from '../primitives/separator'
+
+const NAV_LINKS = ['Home', 'Projects', 'Analytics', 'Team']
+const TABS = ['Overview', 'Activity', 'Settings', 'Billing']
+
+export interface StackedLayoutTabsProps {
+  brandName?: string
+  children?: React.ReactNode
+  className?: string
+}
+
+export function StackedLayoutTabs({
+  brandName = 'Acme Inc',
+  children,
+  className,
+}: StackedLayoutTabsProps) {
+  const [activeTab, setActiveTab] = useState(0)
+  const [activeNav, setActiveNav] = useState(0)
+
+  return (
+    <div className={cn('flex h-[600px] flex-col overflow-hidden rounded-md border border-[hsl(var(--border))] bg-[hsl(var(--background))]', className)}>
+      <nav className="flex h-14 items-center gap-6 border-b border-[hsl(var(--border))] bg-[hsl(var(--card))] px-4">
+        <span className="font-semibold text-sm shrink-0">{brandName}</span>
+        <div className="flex flex-1 items-center gap-1">
+          {NAV_LINKS.map((link, i) => (
+            <button
+              key={link}
+              onClick={() => setActiveNav(i)}
+              className={cn(
+                'px-3 py-1.5 text-sm rounded-md transition-colors',
+                i === activeNav
+                  ? 'bg-[hsl(var(--accent))] font-medium'
+                  : 'text-[hsl(var(--muted-foreground))] hover:bg-[hsl(var(--accent))]'
+              )}
+            >
+              {link}
+            </button>
+          ))}
+        </div>
+        <div className="flex items-center gap-2">
+          <Bell className="h-4 w-4 text-[hsl(var(--muted-foreground))]" />
+          <div className="flex items-center gap-1.5 cursor-pointer">
+            <Avatar className="h-7 w-7"><AvatarFallback className="text-xs">JD</AvatarFallback></Avatar>
+            <ChevronDown className="h-3 w-3 text-[hsl(var(--muted-foreground))]" />
+          </div>
+        </div>
+      </nav>
+      <div className="border-b border-[hsl(var(--border))] bg-[hsl(var(--card))] px-4">
+        <div className="flex gap-4">
+          {TABS.map((tab, i) => (
+            <button
+              key={tab}
+              onClick={() => setActiveTab(i)}
+              className={cn(
+                'py-3 text-sm transition-colors border-b-2',
+                i === activeTab
+                  ? 'border-[hsl(var(--primary))] font-medium'
+                  : 'border-transparent text-[hsl(var(--muted-foreground))] hover:text-[hsl(var(--foreground))]'
+              )}
+            >
+              {tab}
+            </button>
+          ))}
+        </div>
+      </div>
+      <main className="flex-1 overflow-auto p-6">
+        {children ?? (
+          <div className="text-sm text-[hsl(var(--muted-foreground))]">
+            Content for <strong>{TABS[activeTab]}</strong> tab
+          </div>
+        )}
+      </main>
+    </div>
+  )
+}

package/src/blocks/task-card.tsx

@@ -0,0 +1,88 @@
+import React from 'react'
+import { Calendar } from 'lucide-react'
+import { cn } from '../utils/cn'
+import { Card, CardContent } from '../primitives/card'
+import { Avatar, AvatarFallback } from '../primitives/avatar'
+import { Badge } from '../primitives/badge'
+
+const PRIORITY_COLOR: Record<string, string> = {
+  High: 'bg-red-500/10 text-red-600 border-red-200',
+  Medium: 'bg-yellow-500/10 text-yellow-600 border-yellow-200',
+  Low: 'bg-green-500/10 text-green-600 border-green-200',
+}
+
+export interface TaskCardProps {
+  title?: string
+  description?: string
+  assigneeInitials?: string
+  dueDate?: string
+  priority?: 'High' | 'Medium' | 'Low'
+  className?: string
+}
+
+export function TaskCard({
+  title = 'Redesign onboarding flow',
+  description = 'Update the user onboarding experience with the new design language.',
+  assigneeInitials = 'AC',
+  dueDate = 'Mar 20',
+  priority = 'High',
+  className,
+}: TaskCardProps) {
+  return (
+    <Card className={cn('cursor-pointer hover:shadow-md transition-shadow', className)}>
+      <CardContent className="p-4 space-y-3">
+        <div className="flex items-start justify-between gap-2">
+          <p className="text-sm font-semibold leading-tight">{title}</p>
+          <span className={cn('text-[10px] px-1.5 py-0.5 rounded-full border font-medium shrink-0', PRIORITY_COLOR[priority])}>
+            {priority}
+          </span>
+        </div>
+        <p className="text-xs text-[hsl(var(--muted-foreground))] leading-relaxed line-clamp-2">{description}</p>
+        <div className="flex items-center justify-between">
+          <Avatar className="h-6 w-6"><AvatarFallback className="text-[10px]">{assigneeInitials}</AvatarFallback></Avatar>
+          <div className="flex items-center gap-1 text-xs text-[hsl(var(--muted-foreground))]">
+            <Calendar className="h-3 w-3" />{dueDate}
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
+
+const LABEL_COLORS = ['bg-blue-100 text-blue-700', 'bg-purple-100 text-purple-700', 'bg-green-100 text-green-700']
+
+export interface TaskCardWithLabelsProps extends TaskCardProps {
+  labels?: string[]
+}
+
+export function TaskCardWithLabels({
+  labels = ['Design', 'Frontend'],
+  ...props
+}: TaskCardWithLabelsProps) {
+  return (
+    <Card className={cn('cursor-pointer hover:shadow-md transition-shadow', props.className)}>
+      <CardContent className="p-4 space-y-3">
+        <div className="flex items-start justify-between gap-2">
+          <p className="text-sm font-semibold leading-tight">{props.title ?? 'Redesign onboarding flow'}</p>
+          <span className={cn('text-[10px] px-1.5 py-0.5 rounded-full border font-medium shrink-0', PRIORITY_COLOR[props.priority ?? 'High'])}>
+            {props.priority ?? 'High'}
+          </span>
+        </div>
+        <p className="text-xs text-[hsl(var(--muted-foreground))] leading-relaxed line-clamp-2">
+          {props.description ?? 'Update the user onboarding experience with the new design language.'}
+        </p>
+        <div className="flex flex-wrap gap-1">
+          {labels.map((l, i) => (
+            <span key={l} className={cn('text-[10px] px-1.5 py-0.5 rounded-full font-medium', LABEL_COLORS[i % LABEL_COLORS.length])}>{l}</span>
+          ))}
+        </div>
+        <div className="flex items-center justify-between">
+          <Avatar className="h-6 w-6"><AvatarFallback className="text-[10px]">{props.assigneeInitials ?? 'AC'}</AvatarFallback></Avatar>
+          <div className="flex items-center gap-1 text-xs text-[hsl(var(--muted-foreground))]">
+            <Calendar className="h-3 w-3" />{props.dueDate ?? 'Mar 20'}
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}

package/src/blocks/user-menu.tsx

@@ -0,0 +1,62 @@
+import React from 'react'
+import { ChevronDown, User, Settings, CreditCard, LogOut } from 'lucide-react'
+import { cn } from '../utils/cn'
+import { Avatar, AvatarFallback } from '../primitives/avatar'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '../primitives/dropdown-menu'
+
+export interface UserMenuProps {
+  name?: string
+  email?: string
+  initials?: string
+  onProfile?: () => void
+  onSettings?: () => void
+  onBilling?: () => void
+  onSignOut?: () => void
+  className?: string
+}
+
+export function UserMenu({
+  name = 'Jane Doe',
+  email = 'jane@acme.com',
+  initials = 'JD',
+  onProfile,
+  onSettings,
+  onBilling,
+  onSignOut,
+  className,
+}: UserMenuProps) {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <button className={cn('flex items-center gap-2 rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-[hsl(var(--accent))] focus:outline-none', className)}>
+          <Avatar className="h-7 w-7">
+            <AvatarFallback className="text-xs">{initials}</AvatarFallback>
+          </Avatar>
+          <span className="font-medium max-w-[120px] truncate">{name}</span>
+          <ChevronDown className="h-3.5 w-3.5 text-[hsl(var(--muted-foreground))]" />
+        </button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="w-52">
+        <DropdownMenuLabel className="font-normal">
+          <p className="text-sm font-medium">{name}</p>
+          <p className="text-xs text-[hsl(var(--muted-foreground))]">{email}</p>
+        </DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem onClick={onProfile}><User className="h-4 w-4" />Profile</DropdownMenuItem>
+        <DropdownMenuItem onClick={onSettings}><Settings className="h-4 w-4" />Account Settings</DropdownMenuItem>
+        <DropdownMenuItem onClick={onBilling}><CreditCard className="h-4 w-4" />Billing</DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem onClick={onSignOut} className="text-[hsl(var(--destructive))] focus:text-[hsl(var(--destructive))]">
+          <LogOut className="h-4 w-4" />Sign out
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}

package/src/blocks/utils/cn.ts

@@ -0,0 +1 @@
+export { cn } from '../../utils/cn'

package/src/blocks/workspace-members.tsx

@@ -0,0 +1,61 @@
+import React, { useState } from 'react'
+import { Search, X } from 'lucide-react'
+import { cn } from '../utils/cn'
+import { Input } from '../primitives/input'
+import { Avatar, AvatarFallback } from '../primitives/avatar'
+import { Badge } from '../primitives/badge'
+import { Button } from '../primitives/button'
+
+const MEMBERS = [
+  { id: '1', name: 'Jane Doe', email: 'jane@acme.com', role: 'Owner', initials: 'JD' },
+  { id: '2', name: 'Bob Smith', email: 'bob@acme.com', role: 'Admin', initials: 'BS' },
+  { id: '3', name: 'Alice Chen', email: 'alice@acme.com', role: 'Member', initials: 'AC' },
+  { id: '4', name: 'Tom Ray', email: 'tom@acme.com', role: 'Member', initials: 'TR' },
+  { id: '5', name: 'Sara Kim', email: 'sara@acme.com', role: 'Viewer', initials: 'SK' },
+]
+
+const roleVariant = (role: string): 'default' | 'secondary' | 'outline' =>
+  role === 'Owner' ? 'default' : role === 'Admin' ? 'secondary' : 'outline'
+
+export interface WorkspaceMembersProps { className?: string }
+
+export function WorkspaceMembers({ className }: WorkspaceMembersProps) {
+  const [query, setQuery] = useState('')
+  const [members, setMembers] = useState(MEMBERS)
+  const filtered = members.filter(m =>
+    m.name.toLowerCase().includes(query.toLowerCase()) ||
+    m.email.toLowerCase().includes(query.toLowerCase())
+  )
+
+  return (
+    <div className={cn('rounded-md border border-[hsl(var(--border))] bg-[hsl(var(--card))]', className)}>
+      <div className="flex items-center justify-between p-4 border-b border-[hsl(var(--border))]">
+        <div>
+          <h2 className="text-sm font-semibold">Members</h2>
+          <p className="text-xs text-[hsl(var(--muted-foreground))]">{members.length} members</p>
+        </div>
+        <div className="relative">
+          <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-[hsl(var(--muted-foreground))]" />
+          <Input className="h-8 pl-8 text-xs w-48" placeholder="Search members..." value={query} onChange={e => setQuery(e.target.value)} />
+        </div>
+      </div>
+      <div className="divide-y divide-[hsl(var(--border))]">
+        {filtered.map(m => (
+          <div key={m.id} className="flex items-center gap-3 px-4 py-3">
+            <Avatar className="h-8 w-8"><AvatarFallback className="text-xs">{m.initials}</AvatarFallback></Avatar>
+            <div className="flex-1 min-w-0">
+              <p className="text-sm font-medium truncate">{m.name}</p>
+              <p className="text-xs text-[hsl(var(--muted-foreground))] truncate">{m.email}</p>
+            </div>
+            <Badge variant={roleVariant(m.role)} className="text-[10px] px-1.5 py-0.5 shrink-0">{m.role}</Badge>
+            {m.role !== 'Owner' && (
+              <Button size="icon" variant="ghost" className="h-7 w-7 shrink-0" onClick={() => setMembers(ms => ms.filter(x => x.id !== m.id))}>
+                <X className="h-3.5 w-3.5" />
+              </Button>
+            )}
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}