@otfdashkit/ui 0.1.1 → 0.1.3

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'

package/src/blocks/manage-tags-modal.tsx

@@ -1,63 +1 @@
-import React, { useState } from 'react'
-import { X, Pencil } from 'lucide-react'
-import { cn } from '../utils/cn'
-import { Input } from '../primitives/input'
-import { Button } from '../primitives/button'
-
-const COLORS = ['bg-blue-500', 'bg-green-500', 'bg-yellow-500', 'bg-purple-500', 'bg-red-500', 'bg-pink-500']
-
-interface Tag { id: string; name: string; color: string }
-
-const INITIAL_TAGS: Tag[] = [
-  { id: '1', name: 'Design', color: 'bg-blue-500' },
-  { id: '2', name: 'Engineering', color: 'bg-green-500' },
-  { id: '3', name: 'Marketing', color: 'bg-yellow-500' },
-  { id: '4', name: 'Research', color: 'bg-purple-500' },
-]
-
-export interface ManageTagsModalProps { className?: string }
-
-export function ManageTagsModal({ className }: ManageTagsModalProps) {
-  const [tags, setTags] = useState<Tag[]>(INITIAL_TAGS)
-  const [newTag, setNewTag] = useState('')
-  const [colorIdx, setColorIdx] = useState(0)
-
-  const addTag = () => {
-    if (!newTag.trim()) return
-    const id = `tag-${Date.now()}`
-    setTags(t => [...t, { id, name: newTag.trim(), color: COLORS[colorIdx % COLORS.length] }])
-    setNewTag('')
-    setColorIdx(i => i + 1)
-  }
-
-  return (
-    <div className={cn('flex flex-col gap-4 p-6', className)}>
-      <div>
-        <h2 className="text-base font-semibold">Manage Tags</h2>
-        <p className="text-sm text-[hsl(var(--muted-foreground))] mt-0.5">Create and organize your tags.</p>
-      </div>
-      <div className="flex gap-2">
-        <div className={cn('h-9 w-9 shrink-0 rounded-md cursor-pointer transition-opacity', COLORS[colorIdx % COLORS.length])}
-          onClick={() => setColorIdx(i => i + 1)} title="Click to change color" />
-        <Input className="flex-1 h-9 text-sm" placeholder="New tag name..." value={newTag}
-          onChange={e => setNewTag(e.target.value)} onKeyDown={e => e.key === 'Enter' && addTag()} />
-        <Button size="sm" className="h-9" onClick={addTag}>Add</Button>
-      </div>
-      <div className="space-y-1.5">
-        {tags.map(tag => (
-          <div key={tag.id} className="flex items-center gap-2 rounded-md border border-[hsl(var(--border))] px-3 py-2">
-            <span className={cn('h-3 w-3 rounded-full shrink-0', tag.color)} />
-            <span className="flex-1 text-sm">{tag.name}</span>
-            <button className="text-[hsl(var(--muted-foreground))] hover:text-[hsl(var(--foreground))] transition-colors">
-              <Pencil className="h-3.5 w-3.5" />
-            </button>
-            <button onClick={() => setTags(ts => ts.filter(t => t.id !== tag.id))}
-              className="text-[hsl(var(--muted-foreground))] hover:text-[hsl(var(--foreground))] transition-colors">
-              <X className="h-3.5 w-3.5" />
-            </button>
-          </div>
-        ))}
-      </div>
-    </div>
-  )
-}
+export * from './ManageTagsModal'

package/src/blocks/messages-card.tsx

@@ -1,59 +1 @@
-import React from 'react'
-import { cn } from '../utils/cn'
-import { Avatar, AvatarFallback } from '../primitives/avatar'
-import { Card, CardContent, CardHeader, CardTitle } from '../primitives/card'
-
-interface Message {
-  id: string
-  name: string
-  initials: string
-  preview: string
-  time: string
-  unread?: boolean
-}
-
-const MESSAGES: Message[] = [
-  { id: '1', name: 'Alice Chen', initials: 'AC', preview: 'Just pushed the new design files to Figma.', time: '9:41 AM', unread: true },
-  { id: '2', name: 'Bob Smith', initials: 'BS', preview: "I'll take a look and share feedback by EOD.", time: '9:43 AM', unread: true },
-  { id: '3', name: 'Tom Ray', initials: 'TR', preview: 'Can we reschedule the standup to 10am?', time: 'Yesterday' },
-  { id: '4', name: 'Sara Kim', initials: 'SK', preview: 'Shipped the new auth flow. Ready for QA.', time: 'Yesterday' },
-  { id: '5', name: 'Mike Liu', initials: 'ML', preview: 'The latest metrics look promising 📈', time: 'Mon' },
-]
-
-function MessageRow({ msg }: { msg: Message }) {
-  return (
-    <div className="flex items-center gap-3 px-4 py-3 hover:bg-[hsl(var(--accent))] cursor-pointer transition-colors">
-      <div className="relative shrink-0">
-        <Avatar className="h-9 w-9"><AvatarFallback className="text-xs">{msg.initials}</AvatarFallback></Avatar>
-        {msg.unread && <span className="absolute -top-0.5 -right-0.5 h-2.5 w-2.5 rounded-full bg-[hsl(var(--primary))] ring-2 ring-[hsl(var(--card))]" />}
-      </div>
-      <div className="flex-1 min-w-0">
-        <div className="flex items-center justify-between gap-2">
-          <p className={cn('text-sm truncate', msg.unread ? 'font-semibold' : 'font-medium')}>{msg.name}</p>
-          <span className="text-xs text-[hsl(var(--muted-foreground))] shrink-0">{msg.time}</span>
-        </div>
-        <p className={cn('text-xs mt-0.5 truncate', msg.unread ? 'text-[hsl(var(--foreground))]' : 'text-[hsl(var(--muted-foreground))]')}>
-          {msg.preview}
-        </p>
-      </div>
-    </div>
-  )
-}
-
-export interface MessagesCardProps { className?: string }
-
-export function MessagesCard({ className }: MessagesCardProps) {
-  return (
-    <Card className={cn('overflow-hidden', className)}>
-      <CardHeader className="px-4 py-3 border-b border-[hsl(var(--border))]">
-        <CardTitle className="text-sm font-semibold flex items-center justify-between">
-          Messages
-          <span className="text-[10px] px-1.5 py-0.5 rounded-full bg-[hsl(var(--primary)/0.1)] text-[hsl(var(--primary))] font-medium">2 new</span>
-        </CardTitle>
-      </CardHeader>
-      <div className="divide-y divide-[hsl(var(--border))]">
-        {MESSAGES.map(m => <MessageRow key={m.id} msg={m} />)}
-      </div>
-    </Card>
-  )
-}
+export * from './MessagesCard'

package/src/blocks/metric-card.tsx

@@ -1,79 +1 @@
-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'
-
-export interface MetricCardProps {
-  label?: string
-  value?: string
-  change?: string
-  trend?: 'up' | 'down'
-  className?: string
-}
-
-export function MetricCard({ label = 'Total Revenue', value = '$48,295', change = '+12.5%', trend = 'up', className }: MetricCardProps) {
-  const TrendIcon = trend === 'up' ? TrendingUp : TrendingDown
-  const trendColor = trend === 'up' ? 'text-green-600' : 'text-red-500'
-  return (
-    <Card className={cn('', className)}>
-      <CardContent className="p-4">
-        <p className="text-sm text-[hsl(var(--muted-foreground))]">{label}</p>
-        <p className="text-2xl font-bold mt-1">{value}</p>
-        <p className={cn('flex items-center gap-1 text-sm mt-1', trendColor)}>
-          <TrendIcon className="h-4 w-4" />{change} from last month
-        </p>
-      </CardContent>
-    </Card>
-  )
-}
-
-export interface MetricCardWithIconProps extends MetricCardProps {
-  icon?: React.ReactNode
-  iconColor?: string
-}
-
-export function MetricCardWithIcon({ icon, iconColor = 'bg-[hsl(var(--primary)/0.1)] text-[hsl(var(--primary))]', ...props }: MetricCardWithIconProps) {
-  const TrendIcon = (props.trend ?? 'up') === 'up' ? TrendingUp : TrendingDown
-  const trendColor = (props.trend ?? 'up') === 'up' ? 'text-green-600' : 'text-red-500'
-  return (
-    <Card className={cn('', props.className)}>
-      <CardContent className="p-4">
-        <div className="flex items-start justify-between">
-          <div>
-            <p className="text-sm text-[hsl(var(--muted-foreground))]">{props.label ?? 'Total Revenue'}</p>
-            <p className="text-2xl font-bold mt-1">{props.value ?? '$48,295'}</p>
-            <p className={cn('flex items-center gap-1 text-sm mt-1', trendColor)}>
-              <TrendIcon className="h-4 w-4" />{props.change ?? '+12.5%'}
-            </p>
-          </div>
-          <div className={cn('flex h-10 w-10 items-center justify-center rounded-md', iconColor)}>
-            {icon ?? <TrendingUp className="h-5 w-5" />}
-          </div>
-        </div>
-      </CardContent>
-    </Card>
-  )
-}
-
-export interface MetricCardWithButtonProps extends MetricCardProps {
-  actionLabel?: string
-  onAction?: () => void
-}
-
-export function MetricCardWithButton({ actionLabel = 'View details', onAction, ...props }: MetricCardWithButtonProps) {
-  const TrendIcon = (props.trend ?? 'up') === 'up' ? TrendingUp : TrendingDown
-  const trendColor = (props.trend ?? 'up') === 'up' ? 'text-green-600' : 'text-red-500'
-  return (
-    <Card className={cn('', props.className)}>
-      <CardContent className="p-4">
-        <p className="text-sm text-[hsl(var(--muted-foreground))]">{props.label ?? 'Total Revenue'}</p>
-        <p className="text-2xl font-bold mt-1">{props.value ?? '$48,295'}</p>
-        <p className={cn('flex items-center gap-1 text-sm mt-1 mb-3', trendColor)}>
-          <TrendIcon className="h-4 w-4" />{props.change ?? '+12.5%'}
-        </p>
-        <Button size="sm" variant="outline" className="w-full" onClick={onAction}>{actionLabel}</Button>
-      </CardContent>
-    </Card>
-  )
-}
+export * from './MetricCard'

package/src/blocks/notification-settings.tsx

@@ -1,61 +1 @@
-import React, { useState } from 'react'
-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 },
-  { id: 'mentions', label: 'Mentions', description: 'Get notified when you are mentioned', default: true },
-  { id: 'followers', label: 'New followers', description: 'Get notified when someone follows you', default: false },
-  { id: 'updates', label: 'Product updates', description: 'Receive emails about new features and improvements', default: true },
-  { id: 'digest', label: 'Weekly digest', description: 'A summary of activity from the past week', default: false },
-  { id: 'security', label: 'Security alerts', description: 'Important alerts about your account security', default: true },
-]
-
-interface NotifRow {
-  id: string
-  label: string
-  description: string
-  checked: boolean
-  onChange: (checked: boolean) => void
-}
-
-function NotifRow({ label, description, checked, onChange }: NotifRow) {
-  return (
-    <div className="flex items-center justify-between gap-4 py-4">
-      <div>
-        <p className="text-sm font-medium">{label}</p>
-        <p className="text-xs text-[hsl(var(--muted-foreground))] mt-0.5">{description}</p>
-      </div>
-      <Switch checked={checked} onCheckedChange={onChange} />
-    </div>
-  )
-}
-
-export interface NotificationSettingsProps { className?: string }
-
-export function NotificationSettings({ className }: NotificationSettingsProps) {
-  const [states, setStates] = useState<Record<string, boolean>>(
-    Object.fromEntries(NOTIFICATIONS.map(n => [n.id, n.default]))
-  )
-
-  return (
-    <div className={cn('rounded-md border border-[hsl(var(--border))] bg-[hsl(var(--card))] p-6', className)}>
-      <div className="mb-4">
-        <h2 className="text-base font-semibold">Email Notifications</h2>
-        <p className="text-sm text-[hsl(var(--muted-foreground))] mt-0.5">Choose what you want to be notified about.</p>
-      </div>
-      <Separator />
-      <div className="divide-y divide-[hsl(var(--border))]">
-        {NOTIFICATIONS.map(n => (
-          <NotifRow
-            key={n.id}
-            {...n}
-            checked={states[n.id]}
-            onChange={val => setStates(s => ({ ...s, [n.id]: val }))}
-          />
-        ))}
-      </div>
-    </div>
-  )
-}
+export * from './NotificationSettings'

package/src/blocks/organization-menu.tsx

@@ -1,85 +1 @@
-import React, { useState } from 'react'
-import { ChevronDown, Check, Plus } from 'lucide-react'
-import { cn } from '../utils/cn'
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from '../primitives/dropdown-menu'
-import { useSidebar } from '../app-shell/Sidebar'
-
-const ORGS = [
-  { id: '1', name: 'Acme Corp', slug: 'acme', plan: 'Pro' },
-  { id: '2', name: 'Beta Labs', slug: 'beta-labs', plan: 'Starter' },
-  { id: '3', name: 'Gamma Inc', slug: 'gamma', plan: 'Free' },
-]
-
-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,
-  defaultOrgId,
-  onSwitch,
-  onCreateOrg,
-  className,
-}: OrgMenuProps) {
-  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 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>
-          {!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={() => 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 === activeId && <Check className="h-3.5 w-3.5 text-[hsl(var(--primary))]" />}
-          </DropdownMenuItem>
-        ))}
-        <DropdownMenuSeparator />
-        <DropdownMenuItem onClick={onCreateOrg}>
-          <Plus className="h-4 w-4" />Create organization
-        </DropdownMenuItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  )
-}
+export * from './OrganizationMenu'

package/src/blocks/roles-menu.tsx

@@ -1,61 +1 @@
-import React, { useState } from 'react'
-import { ChevronDown, Check } from 'lucide-react'
-import { cn } from '../utils/cn'
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from '../primitives/dropdown-menu'
-import { Button } from '../primitives/button'
-
-const ROLES = [
-  { value: 'owner', label: 'Owner', description: 'Full control over the workspace' },
-  { value: 'admin', label: 'Admin', description: 'Manage members and settings' },
-  { value: 'member', label: 'Member', description: 'Can create and edit content' },
-  { value: 'viewer', label: 'Viewer', description: 'Read-only access' },
-]
-
-export interface RolesMenuProps {
-  value?: string
-  onChange?: (role: string) => void
-  className?: string
-}
-
-export function RolesMenu({ value = 'member', onChange, className }: RolesMenuProps) {
-  const [role, setRole] = useState(value)
-  const current = ROLES.find(r => r.value === role) ?? ROLES[2]
-
-  const handleChange = (v: string) => {
-    setRole(v)
-    onChange?.(v)
-  }
-
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button variant="outline" size="sm" className={cn('gap-1.5', className)}>
-          {current.label}
-          <ChevronDown className="h-3.5 w-3.5 opacity-60" />
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent align="end" className="w-56">
-        <DropdownMenuLabel>Change role</DropdownMenuLabel>
-        <DropdownMenuSeparator />
-        <DropdownMenuRadioGroup value={role} onValueChange={handleChange}>
-          {ROLES.map(r => (
-            <DropdownMenuRadioItem key={r.value} value={r.value} className="items-start py-2.5">
-              <div className="ml-1">
-                <p className="text-sm font-medium leading-none">{r.label}</p>
-                <p className="text-xs text-[hsl(var(--muted-foreground))] mt-0.5">{r.description}</p>
-              </div>
-            </DropdownMenuRadioItem>
-          ))}
-        </DropdownMenuRadioGroup>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  )
-}
+export * from './RolesMenu'

package/src/blocks/select-users-modal.tsx

@@ -1,64 +1 @@
-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'
-
-const USERS = [
-  { id: '1', name: 'Jane Doe', email: 'jane@acme.com', initials: 'JD' },
-  { id: '2', name: 'Bob Smith', email: 'bob@acme.com', initials: 'BS' },
-  { id: '3', name: 'Alice Chen', email: 'alice@acme.com', initials: 'AC' },
-  { id: '4', name: 'Tom Ray', email: 'tom@acme.com', initials: 'TR' },
-  { id: '5', name: 'Sara Kim', email: 'sara@acme.com', initials: 'SK' },
-  { id: '6', name: 'Mike Liu', email: 'mike@acme.com', initials: 'ML' },
-]
-
-export interface SelectUsersModalProps {
-  onConfirm?: (ids: string[]) => void
-  className?: string
-}
-
-export function SelectUsersModal({ onConfirm, className }: SelectUsersModalProps) {
-  const [query, setQuery] = useState('')
-  const [selected, setSelected] = useState<Set<string>>(new Set())
-
-  const filtered = USERS.filter(u =>
-    u.name.toLowerCase().includes(query.toLowerCase()) ||
-    u.email.toLowerCase().includes(query.toLowerCase())
-  )
-
-  const toggle = (id: string) =>
-    setSelected(s => { const n = new Set(s); n.has(id) ? n.delete(id) : n.add(id); return n })
-
-  return (
-    <div className={cn('flex flex-col', className)}>
-      <div className="p-4 border-b border-[hsl(var(--border))]">
-        <h2 className="text-sm font-semibold mb-3">Select Users</h2>
-        <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="pl-8 h-8 text-sm" placeholder="Search users..." value={query} onChange={e => setQuery(e.target.value)} />
-        </div>
-      </div>
-      <div className="overflow-auto max-h-64 divide-y divide-[hsl(var(--border))]">
-        {filtered.map(u => (
-          <label key={u.id} className="flex cursor-pointer items-center gap-3 px-4 py-3 hover:bg-[hsl(var(--accent))] transition-colors">
-            <Checkbox checked={selected.has(u.id)} onCheckedChange={() => toggle(u.id)} />
-            <Avatar className="h-7 w-7"><AvatarFallback className="text-xs">{u.initials}</AvatarFallback></Avatar>
-            <div className="flex-1 min-w-0">
-              <p className="text-sm font-medium truncate">{u.name}</p>
-              <p className="text-xs text-[hsl(var(--muted-foreground))] truncate">{u.email}</p>
-            </div>
-          </label>
-        ))}
-      </div>
-      <div className="flex items-center justify-between p-4 border-t border-[hsl(var(--border))]">
-        <span className="text-sm text-[hsl(var(--muted-foreground))]">{selected.size} selected</span>
-        <Button size="sm" disabled={selected.size === 0} onClick={() => onConfirm?.(Array.from(selected))}>
-          Confirm
-        </Button>
-      </div>
-    </div>
-  )
-}
+export * from './SelectUsersModal'