@otfdashkit/ui 0.1.1 → 0.1.2

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

@@ -1,73 +1 @@
-// @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>
-  )
-}
+export * from './SidebarLayoutMinimal'

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

@@ -1,79 +1 @@
-// @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>
-  )
-}
+export * from './SidebarLayoutSearch'

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

@@ -1,82 +1 @@
-// @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>
-  )
-}
+export * from './SidebarLayoutUser'

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

@@ -1,70 +1 @@
-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>
-  )
-}
+export * from './SortableTaskList'

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

@@ -1,64 +1 @@
-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>
-  )
-}
+export * from './StackedLayoutBranded'

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

@@ -1,80 +1 @@
-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>
-  )
-}
+export * from './StackedLayoutTabs'

package/src/blocks/task-card.tsx

@@ -1,88 +1 @@
-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>
-  )
-}
+export * from './TaskCard'

package/src/blocks/user-menu.tsx

@@ -1,62 +1 @@
-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>
-  )
-}
+export * from './UserMenu'