@otfdashkit/ui 0.1.1 → 0.1.3

package/src/blocks/MessagesCard/MessagesCard.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
-import { cn } from '../utils/cn'
-import { Avatar, AvatarFallback } from '../primitives/avatar'
-import { Card, CardContent, CardHeader, CardTitle } from '../primitives/card'
+import { cn } from '../../utils/cn'
+import { Avatar, AvatarFallback } from '../../primitives/avatar'
+import { Card, CardContent, CardHeader, CardTitle } from '../../primitives/card'
 
 interface Message {
   id: string

package/src/blocks/MetricCard/MetricCard.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
 import { TrendingUp, TrendingDown } from 'lucide-react'
-import { cn } from '../utils/cn'
-import { Card, CardContent } from '../primitives/card'
-import { Button } from '../primitives/button'
+import { cn } from '../../utils/cn'
+import { Card, CardContent } from '../../primitives/card'
+import { Button } from '../../primitives/button'
 
 export interface MetricCardProps {
   label?: string

package/src/blocks/NotificationSettings/NotificationSettings.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
-import { cn } from '../utils/cn'
-import { Switch } from '../primitives/switch'
-import { Separator } from '../primitives/separator'
+import { cn } from '../../utils/cn'
+import { Switch } from '../../primitives/switch'
+import { Separator } from '../../primitives/separator'
 
 const NOTIFICATIONS = [
   { id: 'comments', label: 'Comments', description: 'Get notified when someone comments on your post', default: true },
@@ -51,7 +51,7 @@ export function NotificationSettings({ className }: NotificationSettingsProps) {
           <NotifRow
             key={n.id}
             {...n}
-            checked={states[n.id]}
+            checked={states[n.id] ?? false}
             onChange={val => setStates(s => ({ ...s, [n.id]: val }))}
           />
         ))}

package/src/blocks/OrganizationMenu/OrganizationMenu.tsx

@@ -1,6 +1,6 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { ChevronDown, Check, Plus } from 'lucide-react'
-import { cn } from '../utils/cn'
+import { cn } from '../../utils/cn'
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -8,7 +8,8 @@ import {
   DropdownMenuLabel,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-} from '../primitives/dropdown-menu'
+} from '../../primitives/dropdown-menu'
+import { useSidebar } from '../../app-shell/Sidebar'
 
 const ORGS = [
   { id: '1', name: 'Acme Corp', slug: 'acme', plan: 'Pro' },
@@ -17,43 +18,61 @@ const ORGS = [
 ]
 
 export interface OrgMenuProps {
+  /** Controlled mode — pass to manage selection externally. If omitted, the menu manages its own state. */
   currentOrgId?: string
+  /** Default selection in uncontrolled mode. Defaults to the first org. */
+  defaultOrgId?: string
   onSwitch?: (orgId: string) => void
   onCreateOrg?: () => void
   className?: string
 }
 
 export function OrgMenu({
-  currentOrgId = '1',
+  currentOrgId,
+  defaultOrgId,
   onSwitch,
   onCreateOrg,
   className,
 }: OrgMenuProps) {
-  const current = ORGS.find(o => o.id === currentOrgId) ?? ORGS[0]
+  const [internalId, setInternalId] = useState(defaultOrgId ?? ORGS[0]?.id ?? '1')
+  const activeId = currentOrgId ?? internalId
+  const current = ORGS.find(o => o.id === activeId) ?? ORGS[0]!
+  const { collapsed } = useSidebar()
+
+  function handleSwitch(orgId: string) {
+    if (currentOrgId === undefined) setInternalId(orgId)
+    onSwitch?.(orgId)
+  }
 
   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)}>
-          <div className="flex h-6 w-6 items-center justify-center rounded bg-[hsl(var(--primary))] text-[10px] font-bold text-[hsl(var(--primary-foreground))]">
+        <button
+          className={cn(
+            'flex items-center rounded-md py-1.5 text-sm transition-colors hover:bg-[hsl(var(--accent))] focus:outline-none',
+            collapsed ? 'justify-center px-0' : 'gap-2 px-2',
+            className,
+          )}
+        >
+          <div className="flex h-6 w-6 items-center justify-center rounded bg-[hsl(var(--primary))] text-[10px] font-bold text-[hsl(var(--primary-foreground))] shrink-0">
             {current.name[0]}
           </div>
-          <span className="font-medium max-w-[120px] truncate">{current.name}</span>
-          <ChevronDown className="h-3.5 w-3.5 text-[hsl(var(--muted-foreground))]" />
+          {!collapsed && <span className="font-medium max-w-[120px] truncate">{current.name}</span>}
+          {!collapsed && <ChevronDown className="h-3.5 w-3.5 text-[hsl(var(--muted-foreground))]" />}
         </button>
       </DropdownMenuTrigger>
       <DropdownMenuContent align="start" className="w-52">
         <DropdownMenuLabel>Organizations</DropdownMenuLabel>
         <DropdownMenuSeparator />
         {ORGS.map(org => (
-          <DropdownMenuItem key={org.id} onClick={() => onSwitch?.(org.id)} className="justify-between">
+          <DropdownMenuItem key={org.id} onClick={() => handleSwitch(org.id)} className="justify-between">
             <div className="flex items-center gap-2">
               <div className="flex h-5 w-5 items-center justify-center rounded bg-[hsl(var(--muted))] text-[10px] font-bold">
                 {org.name[0]}
               </div>
               <span>{org.name}</span>
             </div>
-            {org.id === currentOrgId && <Check className="h-3.5 w-3.5 text-[hsl(var(--primary))]" />}
+            {org.id === activeId && <Check className="h-3.5 w-3.5 text-[hsl(var(--primary))]" />}
           </DropdownMenuItem>
         ))}
         <DropdownMenuSeparator />

package/src/blocks/RolesMenu/RolesMenu.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
 import { ChevronDown, Check } from 'lucide-react'
-import { cn } from '../utils/cn'
+import { cn } from '../../utils/cn'
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -9,8 +9,8 @@ import {
   DropdownMenuLabel,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-} from '../primitives/dropdown-menu'
-import { Button } from '../primitives/button'
+} from '../../primitives/dropdown-menu'
+import { Button } from '../../primitives/button'
 
 const ROLES = [
   { value: 'owner', label: 'Owner', description: 'Full control over the workspace' },
@@ -27,7 +27,7 @@ export interface RolesMenuProps {
 
 export function RolesMenu({ value = 'member', onChange, className }: RolesMenuProps) {
   const [role, setRole] = useState(value)
-  const current = ROLES.find(r => r.value === role) ?? ROLES[2]
+  const current = ROLES.find(r => r.value === role) ?? ROLES[0]!
 
   const handleChange = (v: string) => {
     setRole(v)

package/src/blocks/SelectUsersModal/SelectUsersModal.tsx

@@ -1,10 +1,10 @@
 import React, { useState } from 'react'
 import { Search } from 'lucide-react'
-import { cn } from '../utils/cn'
-import { Input } from '../primitives/input'
-import { Button } from '../primitives/button'
-import { Checkbox } from '../primitives/checkbox'
-import { Avatar, AvatarFallback } from '../primitives/avatar'
+import { cn } from '../../utils/cn'
+import { Input } from '../../primitives/input'
+import { Button } from '../../primitives/button'
+import { Checkbox } from '../../primitives/checkbox'
+import { Avatar, AvatarFallback } from '../../primitives/avatar'
 
 const USERS = [
   { id: '1', name: 'Jane Doe', email: 'jane@acme.com', initials: 'JD' },

package/src/blocks/SidebarLayoutDashboard/SidebarLayoutDashboard.tsx

@@ -1,11 +1,11 @@
 // @ts-nocheck
 import React from 'react'
 import { LayoutDashboard, FolderOpen, Users, Settings, Bell, TrendingUp } from 'lucide-react'
-import { cn } from '../utils/cn'
-import { Avatar, AvatarFallback } from '../primitives/avatar'
-import { Badge } from '../primitives/badge'
-import { Separator } from '../primitives/separator'
-import { Card, CardContent } from '../primitives/card'
+import { cn } from '../../utils/cn'
+import { Avatar, AvatarFallback } from '../../primitives/avatar'
+import { Badge } from '../../primitives/badge'
+import { Separator } from '../../primitives/separator'
+import { Card, CardContent } from '../../primitives/card'
 
 const NAV_ITEMS = [
   { icon: LayoutDashboard, label: 'Dashboard', active: true },

package/src/blocks/SidebarLayoutGroups/SidebarLayoutGroups.tsx

@@ -1,8 +1,8 @@
 // @ts-nocheck
 import React from 'react'
 import { LayoutDashboard, BarChart2, FolderOpen, Users, CreditCard, Settings, HelpCircle } from 'lucide-react'
-import { cn } from '../utils/cn'
-import { Separator } from '../primitives/separator'
+import { cn } from '../../utils/cn'
+import { Separator } from '../../primitives/separator'
 
 const NAV_GROUPS = [
   {

package/src/blocks/SidebarLayoutMinimal/SidebarLayoutMinimal.tsx

@@ -1,9 +1,9 @@
 // @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'
+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 },

package/src/blocks/SidebarLayoutSearch/SidebarLayoutSearch.tsx

@@ -1,9 +1,9 @@
 // @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'
+import { cn } from '../../utils/cn'
+import { Input } from '../../primitives/input'
+import { Separator } from '../../primitives/separator'
 
 const ALL_ITEMS = [
   { icon: LayoutDashboard, label: 'Dashboard', active: true },

package/src/blocks/SidebarLayoutUser/SidebarLayoutUser.tsx

@@ -1,10 +1,10 @@
 // @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'
+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 },

package/src/blocks/SortableTaskList/SortableTaskList.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
-import { cn } from '../utils/cn'
-import { Checkbox } from '../primitives/checkbox'
-import { Avatar, AvatarFallback } from '../primitives/avatar'
+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'

package/src/blocks/StackedLayoutBranded/StackedLayoutBranded.tsx

@@ -1,9 +1,9 @@
 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'
+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']
 

package/src/blocks/StackedLayoutTabs/StackedLayoutTabs.tsx

@@ -1,9 +1,9 @@
 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'
+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']

package/src/blocks/TaskCard/TaskCard.tsx

@@ -1,9 +1,9 @@
 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'
+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',

package/src/blocks/UserMenu/UserMenu.tsx

@@ -1,7 +1,7 @@
 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 { cn } from '../../utils/cn'
+import { Avatar, AvatarFallback } from '../../primitives/avatar'
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -9,7 +9,7 @@ import {
   DropdownMenuLabel,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-} from '../primitives/dropdown-menu'
+} from '../../primitives/dropdown-menu'
 
 export interface UserMenuProps {
   name?: string

package/src/blocks/WorkspaceMembers/WorkspaceMembers.tsx

@@ -1,10 +1,10 @@
 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'
+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' },

package/src/blocks/chat-detail.tsx

@@ -1,73 +1 @@
-import React, { useState } from 'react'
-import { Send } from 'lucide-react'
-import { cn } from '../utils/cn'
-import { Avatar, AvatarFallback } from '../primitives/avatar'
-import { Input } from '../primitives/input'
-import { Button } from '../primitives/button'
-
-interface Message { id: string; author: string; initials: string; text: string; time: string; self?: boolean }
-
-const INITIAL_MESSAGES: Message[] = [
-  { id: '1', author: 'Alice Chen', initials: 'AC', text: 'Hey team, just pushed the new design files to Figma.', time: '9:41 AM' },
-  { id: '2', author: 'Bob Smith', initials: 'BS', text: "Awesome! I'll take a look and share feedback by EOD.", time: '9:43 AM' },
-  { id: '3', author: 'You', initials: 'JD', text: 'Looks great, the new color palette really pops!', time: '9:45 AM', self: true },
-  { id: '4', author: 'Alice Chen', initials: 'AC', text: "Thanks! Let's sync tomorrow to go through the comments.", time: '9:47 AM' },
-]
-
-function ChatBubble({ msg }: { msg: Message }) {
-  return (
-    <div className={cn('flex gap-2.5', msg.self && 'flex-row-reverse')}>
-      <Avatar className="h-7 w-7 shrink-0 mt-0.5">
-        <AvatarFallback className="text-xs">{msg.initials}</AvatarFallback>
-      </Avatar>
-      <div className={cn('max-w-[70%]', msg.self && 'items-end flex flex-col')}>
-        <div className="flex items-baseline gap-2 mb-0.5">
-          <span className="text-xs font-medium">{msg.author}</span>
-          <span className="text-[10px] text-[hsl(var(--muted-foreground))]">{msg.time}</span>
-        </div>
-        <div className={cn(
-          'rounded-md px-3 py-2 text-sm',
-          msg.self
-            ? 'bg-[hsl(var(--primary))] text-[hsl(var(--primary-foreground))]'
-            : 'bg-[hsl(var(--muted))]'
-        )}>
-          {msg.text}
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export interface ChatDetailProps { className?: string }
-
-export function ChatDetail({ className }: ChatDetailProps) {
-  const [messages, setMessages] = useState(INITIAL_MESSAGES)
-  const [input, setInput] = useState('')
-
-  const send = () => {
-    if (!input.trim()) return
-    const now = new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
-    setMessages(m => [...m, { id: `${Date.now()}`, author: 'You', initials: 'JD', text: input.trim(), time: now, self: true }])
-    setInput('')
-  }
-
-  return (
-    <div className={cn('flex h-[480px] flex-col overflow-hidden rounded-md border border-[hsl(var(--border))] bg-[hsl(var(--card))]', className)}>
-      <header className="flex items-center gap-3 border-b border-[hsl(var(--border))] px-4 py-3">
-        <Avatar className="h-8 w-8"><AvatarFallback className="text-xs">AC</AvatarFallback></Avatar>
-        <div>
-          <p className="text-sm font-semibold">Design Team</p>
-          <p className="text-xs text-[hsl(var(--muted-foreground))]">4 members</p>
-        </div>
-      </header>
-      <div className="flex-1 overflow-auto p-4 space-y-4">
-        {messages.map(m => <ChatBubble key={m.id} msg={m} />)}
-      </div>
-      <div className="flex items-center gap-2 border-t border-[hsl(var(--border))] p-3">
-        <Input className="flex-1 h-9 text-sm" placeholder="Type a message..." value={input}
-          onChange={e => setInput(e.target.value)} onKeyDown={e => e.key === 'Enter' && send()} />
-        <Button size="icon" className="h-9 w-9 shrink-0" onClick={send}><Send className="h-4 w-4" /></Button>
-      </div>
-    </div>
-  )
-}
+export * from './ChatDetail'

package/src/blocks/feedback-modal.tsx

@@ -1,68 +1 @@
-import React, { useState } from 'react'
-import { cn } from '../utils/cn'
-import { Button } from '../primitives/button'
-import { Textarea } from '../primitives/textarea'
-
-const REACTIONS = ['😊', '😐', '😕', '😡', '🤩']
-
-export interface FeedbackModalProps {
-  onSubmit?: (data: { reaction: string; text: string }) => void
-  className?: string
-}
-
-export function FeedbackModal({ onSubmit, className }: FeedbackModalProps) {
-  const [reaction, setReaction] = useState('')
-  const [text, setText] = useState('')
-  const [submitted, setSubmitted] = useState(false)
-
-  const handleSubmit = () => {
-    onSubmit?.({ reaction, text })
-    setSubmitted(true)
-  }
-
-  if (submitted) {
-    return (
-      <div className={cn('flex flex-col items-center gap-3 py-8 px-6 text-center', className)}>
-        <span className="text-4xl">🎉</span>
-        <p className="font-semibold">Thanks for your feedback!</p>
-        <p className="text-sm text-[hsl(var(--muted-foreground))]">We'll use it to improve your experience.</p>
-      </div>
-    )
-  }
-
-  return (
-    <div className={cn('flex flex-col gap-4 p-6', className)}>
-      <div>
-        <h2 className="text-base font-semibold">Send Feedback</h2>
-        <p className="text-sm text-[hsl(var(--muted-foreground))] mt-0.5">How are you feeling about the product?</p>
-      </div>
-      <div className="flex gap-2">
-        {REACTIONS.map(r => (
-          <button
-            key={r}
-            onClick={() => setReaction(r)}
-            className={cn(
-              'flex h-10 w-10 items-center justify-center rounded-md border text-xl transition-colors',
-              reaction === r
-                ? 'border-[hsl(var(--primary))] bg-[hsl(var(--primary)/0.1)]'
-                : 'border-[hsl(var(--border))] hover:bg-[hsl(var(--accent))]'
-            )}
-          >
-            {r}
-          </button>
-        ))}
-      </div>
-      <Textarea
-        placeholder="Tell us more (optional)..."
-        value={text}
-        onChange={e => setText(e.target.value)}
-        className="resize-none"
-        rows={4}
-      />
-      <div className="flex justify-end gap-2">
-        <Button variant="outline" size="sm">Cancel</Button>
-        <Button size="sm" onClick={handleSubmit} disabled={!reaction}>Submit</Button>
-      </div>
-    </div>
-  )
-}
+export * from './FeedbackModal'

package/src/blocks/file-cards.tsx

@@ -1,56 +1 @@
-// @ts-nocheck
-import React from 'react'
-import { FileText, Image, FileCode, Film, Archive, File } from 'lucide-react'
-import { cn } from '../utils/cn'
-import { Card, CardContent } from '../primitives/card'
-
-interface FileItem { id: string; name: string; type: string; size: string; modified: string }
-
-const FILES: FileItem[] = [
-  { id: '1', name: 'design-system.fig', type: 'figma', size: '14.2 MB', modified: 'Mar 12' },
-  { id: '2', name: 'hero-banner.png', type: 'image', size: '3.8 MB', modified: 'Mar 11' },
-  { id: '3', name: 'api-spec.yaml', type: 'code', size: '42 KB', modified: 'Mar 10' },
-  { id: '4', name: 'demo-video.mp4', type: 'video', size: '128 MB', modified: 'Mar 9' },
-  { id: '5', name: 'assets.zip', type: 'archive', size: '56 MB', modified: 'Mar 8' },
-  { id: '6', name: 'meeting-notes.pdf', type: 'pdf', size: '1.1 MB', modified: 'Mar 7' },
-]
-
-const TYPE_ICON: Record<string, React.ElementType> = {
-  figma: FileText, image: Image, code: FileCode, video: Film, archive: Archive, pdf: FileText,
-}
-
-const TYPE_COLOR: Record<string, string> = {
-  figma: 'text-purple-500', image: 'text-green-500', code: 'text-blue-500',
-  video: 'text-red-500', archive: 'text-yellow-500', pdf: 'text-orange-500',
-}
-
-function FileCard({ file }: { file: FileItem }) {
-  const Icon = TYPE_ICON[file.type] ?? File
-  return (
-    <Card className="cursor-pointer hover:shadow-md transition-shadow">
-      <CardContent className="p-4">
-        <div className={cn('flex h-10 w-10 items-center justify-center rounded-md bg-[hsl(var(--muted))] mb-3', TYPE_COLOR[file.type])}>
-          <Icon className="h-5 w-5" />
-        </div>
-        <p className="text-sm font-medium truncate">{file.name}</p>
-        <div className="flex items-center justify-between mt-1">
-          <span className="text-xs text-[hsl(var(--muted-foreground))]">{file.size}</span>
-          <span className="text-xs text-[hsl(var(--muted-foreground))]">{file.modified}</span>
-        </div>
-      </CardContent>
-    </Card>
-  )
-}
-
-export interface FileCardsProps {
-  files?: FileItem[]
-  className?: string
-}
-
-export function FileCards({ files = FILES, className }: FileCardsProps) {
-  return (
-    <div className={cn('grid gap-3', className)} style={{ gridTemplateColumns: 'repeat(auto-fill, minmax(min(100%,160px),1fr))' }}>
-      {files.map(f => <FileCard key={f.id} file={f} />)}
-    </div>
-  )
-}
+export * from './FileCards'

package/src/blocks/files-list.tsx

@@ -1,72 +1 @@
-// @ts-nocheck
-import React from 'react'
-import { FileText, Image, FileCode, Film, Archive, MoreHorizontal, Download, Trash2 } from 'lucide-react'
-import { cn } from '../utils/cn'
-import { Button } from '../primitives/button'
-import {
-  DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger,
-} from '../primitives/dropdown-menu'
-
-interface FileItem { id: string; name: string; type: string; size: string; modified: string }
-
-const FILES: FileItem[] = [
-  { id: '1', name: 'design-system.fig', type: 'Figma', size: '14.2 MB', modified: 'Mar 12, 2024' },
-  { id: '2', name: 'hero-banner.png', type: 'PNG Image', size: '3.8 MB', modified: 'Mar 11, 2024' },
-  { id: '3', name: 'api-spec.yaml', type: 'YAML', size: '42 KB', modified: 'Mar 10, 2024' },
-  { id: '4', name: 'demo-video.mp4', type: 'MP4 Video', size: '128 MB', modified: 'Mar 9, 2024' },
-  { id: '5', name: 'assets.zip', type: 'ZIP Archive', size: '56 MB', modified: 'Mar 8, 2024' },
-]
-
-const TYPE_ICON: Record<string, React.ElementType> = {
-  Figma: FileText, 'PNG Image': Image, YAML: FileCode, 'MP4 Video': Film, 'ZIP Archive': Archive,
-}
-
-function FileRow({ file, onDelete }: { file: FileItem; onDelete: () => void }) {
-  const Icon = TYPE_ICON[file.type] ?? FileText
-  return (
-    <tr className="border-b border-[hsl(var(--border))] last:border-0 hover:bg-[hsl(var(--accent)/0.5)] transition-colors">
-      <td className="px-4 py-3">
-        <div className="flex items-center gap-2.5">
-          <Icon className="h-4 w-4 shrink-0 text-[hsl(var(--muted-foreground))]" />
-          <span className="text-sm font-medium">{file.name}</span>
-        </div>
-      </td>
-      <td className="px-4 py-3 text-sm text-[hsl(var(--muted-foreground))]">{file.type}</td>
-      <td className="px-4 py-3 text-sm text-[hsl(var(--muted-foreground))]">{file.size}</td>
-      <td className="px-4 py-3 text-sm text-[hsl(var(--muted-foreground))]">{file.modified}</td>
-      <td className="px-4 py-3 text-right">
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button size="icon" variant="ghost" className="h-7 w-7"><MoreHorizontal className="h-4 w-4" /></Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="end">
-            <DropdownMenuItem><Download className="h-4 w-4" />Download</DropdownMenuItem>
-            <DropdownMenuItem onClick={onDelete} className="text-[hsl(var(--destructive))]">
-              <Trash2 className="h-4 w-4" />Delete
-            </DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
-      </td>
-    </tr>
-  )
-}
-
-export interface FilesListProps { className?: string }
-
-export function FilesList({ className }: FilesListProps) {
-  const [files, setFiles] = React.useState(FILES)
-  return (
-    <div className={cn('rounded-md border border-[hsl(var(--border))] overflow-hidden', className)}>
-      <table className="w-full">
-        <thead className="bg-[hsl(var(--muted)/0.5)]">
-          <tr>{['Name', 'Type', 'Size', 'Modified', ''].map(h => (
-            <th key={h} className="px-4 py-2.5 text-left text-xs font-medium text-[hsl(var(--muted-foreground))]">{h}</th>
-          ))}</tr>
-        </thead>
-        <tbody>
-          {files.map(f => <FileRow key={f.id} file={f} onDelete={() => setFiles(fs => fs.filter(x => x.id !== f.id))} />)}
-        </tbody>
-      </table>
-    </div>
-  )
-}
+export * from './FilesList'