@otfdashkit/ui 0.1.1 → 0.1.2

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'

package/src/blocks/integration-card.tsx

@@ -1,50 +1 @@
-import React, { useState } from 'react'
-import { cn } from '../utils/cn'
-import { Badge } from '../primitives/badge'
-import { Button } from '../primitives/button'
-
-export interface IntegrationCardProps {
-  icon?: React.ReactNode
-  name?: string
-  description?: string
-  connected?: boolean
-  className?: string
-}
-
-export function IntegrationCard({
-  icon,
-  name = 'Slack',
-  description = 'Send notifications and updates to your Slack workspace.',
-  connected = false,
-  className,
-}: IntegrationCardProps) {
-  const [isConnected, setIsConnected] = useState(connected)
-
-  return (
-    <div className={cn('flex items-center gap-4 rounded-md border border-[hsl(var(--border))] bg-[hsl(var(--card))] p-4', className)}>
-      <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-md bg-[hsl(var(--muted))] text-[hsl(var(--muted-foreground))]">
-        {icon ?? <span className="text-base font-bold">{name[0]}</span>}
-      </div>
-      <div className="flex-1 min-w-0">
-        <div className="flex items-center gap-2">
-          <p className="text-sm font-semibold">{name}</p>
-          <Badge
-            variant={isConnected ? 'default' : 'outline'}
-            className="text-[10px] px-1.5 py-0.5 shrink-0"
-          >
-            {isConnected ? 'Connected' : 'Not connected'}
-          </Badge>
-        </div>
-        <p className="text-xs text-[hsl(var(--muted-foreground))] mt-0.5 truncate">{description}</p>
-      </div>
-      <Button
-        size="sm"
-        variant={isConnected ? 'outline' : 'default'}
-        className="shrink-0"
-        onClick={() => setIsConnected(v => !v)}
-      >
-        {isConnected ? 'Disconnect' : 'Connect'}
-      </Button>
-    </div>
-  )
-}
+export * from './IntegrationCard'

package/src/blocks/invite-modal.tsx

@@ -1,69 +1 @@
-import React, { useState } from 'react'
-import { X } from 'lucide-react'
-import { cn } from '../utils/cn'
-import { Input } from '../primitives/input'
-import { Button } from '../primitives/button'
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../primitives/select'
-import { Avatar, AvatarFallback } from '../primitives/avatar'
-import { Badge } from '../primitives/badge'
-
-const PENDING = [
-  { email: 'alex@startup.io', role: 'Member' },
-  { email: 'sam@startup.io', role: 'Viewer' },
-]
-
-export interface InviteModalProps { className?: string }
-
-export function InviteModal({ className }: InviteModalProps) {
-  const [email, setEmail] = useState('')
-  const [role, setRole] = useState('Member')
-  const [pending, setPending] = useState(PENDING)
-
-  const invite = () => {
-    if (!email.trim()) return
-    setPending(p => [...p, { email: email.trim(), role }])
-    setEmail('')
-  }
-
-  return (
-    <div className={cn('flex flex-col gap-4 p-6', className)}>
-      <div>
-        <h2 className="text-base font-semibold">Invite People</h2>
-        <p className="text-sm text-[hsl(var(--muted-foreground))] mt-0.5">Invite team members to collaborate.</p>
-      </div>
-      <div className="flex gap-2">
-        <Input
-          className="flex-1 h-9 text-sm"
-          placeholder="colleague@company.com"
-          value={email}
-          onChange={e => setEmail(e.target.value)}
-          onKeyDown={e => e.key === 'Enter' && invite()}
-        />
-        <Select value={role} onValueChange={setRole}>
-          <SelectTrigger className="h-9 w-28 text-sm"><SelectValue /></SelectTrigger>
-          <SelectContent>
-            {['Admin', 'Member', 'Viewer'].map(r => <SelectItem key={r} value={r}>{r}</SelectItem>)}
-          </SelectContent>
-        </Select>
-        <Button size="sm" className="h-9" onClick={invite}>Send</Button>
-      </div>
-      {pending.length > 0 && (
-        <div className="space-y-1">
-          <p className="text-xs font-medium text-[hsl(var(--muted-foreground))]">Pending invites</p>
-          <div className="divide-y divide-[hsl(var(--border))] rounded-md border border-[hsl(var(--border))]">
-            {pending.map((p, i) => (
-              <div key={i} className="flex items-center gap-2 px-3 py-2">
-                <Avatar className="h-6 w-6"><AvatarFallback className="text-[10px]">{p.email[0].toUpperCase()}</AvatarFallback></Avatar>
-                <span className="flex-1 text-sm truncate">{p.email}</span>
-                <Badge variant="outline" className="text-[10px] px-1.5 py-0.5 shrink-0">{p.role}</Badge>
-                <button onClick={() => setPending(ps => ps.filter((_, j) => j !== i))}>
-                  <X className="h-3.5 w-3.5 text-[hsl(var(--muted-foreground))] hover:text-[hsl(var(--foreground))]" />
-                </button>
-              </div>
-            ))}
-          </div>
-        </div>
-      )}
-    </div>
-  )
-}
+export * from './InviteModal'