@otfdashkit/ui 0.1.1 → 0.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@otfdashkit/ui",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "OTF UI — production-quality React component library. 98 primitives + blocks + layouts + charts on Radix + Tailwind v4. Cross-platform parity API with @otfdashkit/ui-native.",
   "keywords": [
     "otfdashkit",
@@ -17,16 +17,17 @@
     "accessible"
   ],
   "license": "MIT",
-  "author": "otfdashkit <dave@otf-kit.dev>",
-  "homepage": "https://github.com/otf-kit/sdk/tree/main/packages/ui#readme",
+  "author": "otf-kit <dave@otf-kit.dev>",
+  "homepage": "https://otf-kit.dev",
   "repository": {
     "type": "git",
-    "url": "https://github.com/otf-kit/sdk.git",
+    "url": "git+https://github.com/otf-kit/sdk.git",
     "directory": "packages/ui"
   },
   "bugs": {
     "url": "https://github.com/otf-kit/sdk/issues"
   },
+  "funding": "https://otf-kit.dev/pricing",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",

package/src/advanced/BulkActions/BulkActions.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { X } from 'lucide-react'
-import { cn } from '../utils/cn'
-import { Button } from '../primitives/button'
+import { cn } from '../../utils/cn'
+import { Button } from '../../primitives/button'
 
 interface ActionDef {
   label: string

package/src/advanced/CommandBar/CommandBar.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Search, X } from 'lucide-react'
-import { cn } from '../utils/cn'
-import { Dialog, DialogContent, DialogTitle } from '../primitives/dialog'
+import { cn } from '../../utils/cn'
+import { Dialog, DialogContent, DialogTitle } from '../../primitives/dialog'
 
 interface UseCommandBarReturn { open: boolean; setOpen: (v: boolean) => void }
 

package/src/advanced/Filters/Filters.tsx

@@ -1,10 +1,10 @@
 import React from 'react'
 import { Plus, X } from 'lucide-react'
-import { cn } from '../utils/cn'
-import { Button } from '../primitives/button'
-import { Popover, PopoverContent, PopoverTrigger } from '../primitives/popover'
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../primitives/select'
-import { Input } from '../primitives/input'
+import { cn } from '../../utils/cn'
+import { Button } from '../../primitives/button'
+import { Popover, PopoverContent, PopoverTrigger } from '../../primitives/popover'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../../primitives/select'
+import { Input } from '../../primitives/input'
 
 export interface FilterDef {
   key: string
@@ -33,7 +33,7 @@ function AddFilterPopover({ filters, onAdd }: { filters: FilterDef[]; onAdd: (v:
 
   const handleAdd = () => {
     if (!key || !val) return
-    onAdd({ key, operator: op || ops[0], value: val })
+    onAdd({ key, operator: op || ops[0]!, value: val })
     setKey(''); setOp(''); setVal('')
     setOpen(false)
   }

package/src/advanced/Kanban/Kanban.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { DndContext, DragEndEvent, DragOverEvent, DragOverlay, DragStartEvent, PointerSensor, useSensor, useSensors } from '@dnd-kit/core'
 import { SortableContext, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable'
 import { CSS } from '@dnd-kit/utilities'
-import { cn } from '../utils/cn'
+import { cn } from '../../utils/cn'
 
 export interface KanbanCardDef { id: string; title: string; description?: string; badge?: string }
 export interface KanbanColumnDef { id: string; title: string; cards: KanbanCardDef[] }

package/src/advanced/ToggleButton/ToggleButton.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { cn } from '../utils/cn'
+import { cn } from '../../utils/cn'
 
 interface ToggleButtonProps {
   value: string

package/src/advanced/bulk-actions.tsx

@@ -1,46 +1 @@
-import React from 'react'
-import { X } from 'lucide-react'
-import { cn } from '../utils/cn'
-import { Button } from '../primitives/button'
-
-interface ActionDef {
-  label: string
-  icon?: React.ReactNode
-  onClick: () => void
-  variant?: 'default' | 'destructive'
-}
-
-interface BulkActionsProps {
-  count: number
-  actions: ActionDef[]
-  onClear: () => void
-  className?: string
-}
-
-export function BulkActions({ count, actions, onClear, className }: BulkActionsProps) {
-  if (count === 0) return null
-  return (
-    <div className={cn('fixed bottom-6 left-1/2 -translate-x-1/2 z-50 flex items-center gap-2 rounded-full border border-[hsl(var(--border))] bg-[hsl(var(--card))] px-4 py-2 shadow-lg', className)}>
-      <span className="text-sm font-medium text-[hsl(var(--foreground))] pr-2 border-r border-[hsl(var(--border))]">
-        {count} selected
-      </span>
-      <div className="flex items-center gap-1">
-        {actions.map((action, i) => (
-          <Button
-            key={i}
-            variant={action.variant === 'destructive' ? 'destructive' : 'ghost'}
-            size="sm"
-            className="h-7 gap-1.5 text-xs rounded-full px-3"
-            onClick={action.onClick}
-          >
-            {action.icon}
-            {action.label}
-          </Button>
-        ))}
-      </div>
-      <button onClick={onClear} className="ml-1 rounded-full p-0.5 text-[hsl(var(--muted-foreground))] hover:text-[hsl(var(--foreground))] transition-colors">
-        <X className="h-4 w-4" />
-      </button>
-    </div>
-  )
-}
+export * from './BulkActions'

package/src/advanced/command-bar.tsx

@@ -1,115 +1 @@
-import React from 'react'
-import { Search, X } from 'lucide-react'
-import { cn } from '../utils/cn'
-import { Dialog, DialogContent, DialogTitle } from '../primitives/dialog'
-
-interface UseCommandBarReturn { open: boolean; setOpen: (v: boolean) => void }
-
-export function useCommandBar(): UseCommandBarReturn {
-  const [open, setOpen] = React.useState(false)
-
-  React.useEffect(() => {
-    const handler = (e: KeyboardEvent) => {
-      if ((e.metaKey || e.ctrlKey) && e.key === 'k') { e.preventDefault(); setOpen((o) => !o) }
-    }
-    window.addEventListener('keydown', handler)
-    return () => window.removeEventListener('keydown', handler)
-  }, [])
-
-  return { open, setOpen }
-}
-
-export function CommandBarEmpty({ children = 'No results found.' }: { children?: React.ReactNode }) {
-  return <div className="py-6 text-center text-sm text-[hsl(var(--muted-foreground))]">{children}</div>
-}
-
-export function CommandBarGroup({ heading, children }: { heading: string; children: React.ReactNode }) {
-  return (
-    <div className="px-2 py-1">
-      <p className="mb-1 px-2 text-xs font-semibold text-[hsl(var(--muted-foreground))]">{heading}</p>
-      {children}
-    </div>
-  )
-}
-
-interface CommandBarItemProps {
-  icon?: React.ReactNode
-  label: string
-  shortcut?: string
-  onSelect?: () => void
-  active?: boolean
-  className?: string
-}
-
-export function CommandBarItem({ icon, label, shortcut, onSelect, active, className }: CommandBarItemProps) {
-  return (
-    <button
-      onClick={onSelect}
-      className={cn(
-        'flex w-full items-center gap-2.5 rounded-md px-3 py-2 text-sm transition-colors',
-        active ? 'bg-[hsl(var(--accent))] text-[hsl(var(--accent-foreground))]' : 'hover:bg-[hsl(var(--accent)/0.6)]',
-        className
-      )}
-    >
-      {icon && <span className="h-4 w-4 shrink-0 text-[hsl(var(--muted-foreground))]">{icon}</span>}
-      <span className="flex-1 text-left truncate">{label}</span>
-      {shortcut && (
-        <kbd className="pointer-events-none shrink-0 inline-flex h-5 items-center rounded border border-[hsl(var(--border))] bg-[hsl(var(--muted))] px-1.5 text-[10px] font-medium text-[hsl(var(--muted-foreground))]">
-          {shortcut}
-        </kbd>
-      )}
-    </button>
-  )
-}
-
-interface CommandBarProps {
-  open: boolean
-  onOpenChange: (v: boolean) => void
-  children: React.ReactNode
-  placeholder?: string
-  onSearch?: (q: string) => void
-}
-
-export function CommandBar({ open, onOpenChange, children, placeholder = 'Search commands...', onSearch }: CommandBarProps) {
-  const [query, setQuery] = React.useState('')
-
-  const handleSearch = (v: string) => { setQuery(v); onSearch?.(v) }
-
-  const items = React.useRef<HTMLDivElement>(null)
-
-  const handleKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === 'Escape') { onOpenChange(false); return }
-    const focusable = items.current?.querySelectorAll<HTMLButtonElement>('button')
-    if (!focusable?.length) return
-    const arr = Array.from(focusable)
-    const idx = arr.indexOf(document.activeElement as HTMLButtonElement)
-    if (e.key === 'ArrowDown') { e.preventDefault(); arr[(idx + 1) % arr.length]?.focus() }
-    if (e.key === 'ArrowUp')   { e.preventDefault(); arr[(idx - 1 + arr.length) % arr.length]?.focus() }
-  }
-
-  return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="p-0 gap-0 max-w-lg overflow-hidden" onKeyDown={handleKeyDown}>
-        <DialogTitle className="sr-only">Command Bar</DialogTitle>
-        <div className="flex items-center gap-2 border-b border-[hsl(var(--border))] px-4 py-3">
-          <Search className="h-4 w-4 shrink-0 text-[hsl(var(--muted-foreground))]" />
-          <input
-            autoFocus
-            className="flex-1 bg-transparent text-sm outline-none placeholder:text-[hsl(var(--muted-foreground))]"
-            placeholder={placeholder}
-            value={query}
-            onChange={(e) => handleSearch(e.target.value)}
-          />
-          {query && (
-            <button onClick={() => handleSearch('')} className="text-[hsl(var(--muted-foreground))] hover:text-[hsl(var(--foreground))]">
-              <X className="h-4 w-4" />
-            </button>
-          )}
-        </div>
-        <div ref={items} className="max-h-80 overflow-y-auto py-2">
-          {children}
-        </div>
-      </DialogContent>
-    </Dialog>
-  )
-}
+export * from './CommandBar'

package/src/advanced/filters.tsx

@@ -1,103 +1 @@
-import React from 'react'
-import { Plus, X } from 'lucide-react'
-import { cn } from '../utils/cn'
-import { Button } from '../primitives/button'
-import { Popover, PopoverContent, PopoverTrigger } from '../primitives/popover'
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../primitives/select'
-import { Input } from '../primitives/input'
-
-export interface FilterDef {
-  key: string
-  label: string
-  type: 'text' | 'select' | 'date' | 'number'
-  options?: { label: string; value: string }[]
-}
-
-export interface FilterValue {
-  key: string
-  operator: string
-  value: string
-}
-
-const textOps = ['contains', 'equals', 'starts with']
-const numOps = ['=', '>', '<', '>=', '<=']
-
-function AddFilterPopover({ filters, onAdd }: { filters: FilterDef[]; onAdd: (v: FilterValue) => void }) {
-  const [open, setOpen] = React.useState(false)
-  const [key, setKey] = React.useState('')
-  const [op, setOp] = React.useState('')
-  const [val, setVal] = React.useState('')
-
-  const def = filters.find((f) => f.key === key)
-  const ops = def?.type === 'number' ? numOps : textOps
-
-  const handleAdd = () => {
-    if (!key || !val) return
-    onAdd({ key, operator: op || ops[0], value: val })
-    setKey(''); setOp(''); setVal('')
-    setOpen(false)
-  }
-
-  return (
-    <Popover open={open} onOpenChange={setOpen}>
-      <PopoverTrigger asChild>
-        <Button variant="outline" size="sm" className="h-7 gap-1 text-xs"><Plus className="h-3.5 w-3.5" />Add Filter</Button>
-      </PopoverTrigger>
-      <PopoverContent className="w-72 p-3 space-y-2">
-        <Select value={key} onValueChange={setKey}>
-          <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="Field" /></SelectTrigger>
-          <SelectContent>{filters.map((f) => <SelectItem key={f.key} value={f.key}>{f.label}</SelectItem>)}</SelectContent>
-        </Select>
-        {key && (
-          <Select value={op || ops[0]} onValueChange={setOp}>
-            <SelectTrigger className="h-8 text-xs"><SelectValue /></SelectTrigger>
-            <SelectContent>{ops.map((o) => <SelectItem key={o} value={o}>{o}</SelectItem>)}</SelectContent>
-          </Select>
-        )}
-        {key && def?.type === 'select' ? (
-          <Select value={val} onValueChange={setVal}>
-            <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="Value" /></SelectTrigger>
-            <SelectContent>{def.options?.map((o) => <SelectItem key={o.value} value={o.value}>{o.label}</SelectItem>)}</SelectContent>
-          </Select>
-        ) : key && (
-          <Input type={def?.type === 'number' ? 'number' : def?.type === 'date' ? 'date' : 'text'} className="h-8 text-xs" value={val} onChange={(e) => setVal(e.target.value)} placeholder="Value" />
-        )}
-        <Button size="sm" className="w-full h-7 text-xs" onClick={handleAdd} disabled={!key || !val}>Apply</Button>
-      </PopoverContent>
-    </Popover>
-  )
-}
-
-export function FilterBadge({ filter, def, onRemove }: { filter: FilterValue; def?: FilterDef; onRemove: () => void }) {
-  return (
-    <span className="inline-flex items-center gap-1 rounded-full border border-[hsl(var(--border))] bg-[hsl(var(--muted))] px-2.5 py-0.5 text-xs font-medium text-[hsl(var(--foreground))]">
-      <span className="text-[hsl(var(--muted-foreground))]">{def?.label ?? filter.key}</span>
-      <span>{filter.operator}</span>
-      <span className="font-semibold">{filter.value}</span>
-      <button onClick={onRemove} className="ml-0.5 rounded-full hover:text-[hsl(var(--destructive))]"><X className="h-3 w-3" /></button>
-    </span>
-  )
-}
-
-export function FilterItem({ children }: { children: React.ReactNode }) {
-  return <div className="flex items-center gap-1">{children}</div>
-}
-
-interface FiltersProps {
-  filters: FilterDef[]
-  value: FilterValue[]
-  onChange: (v: FilterValue[]) => void
-  className?: string
-}
-
-export function Filters({ filters, value, onChange, className }: FiltersProps) {
-  const remove = (i: number) => onChange(value.filter((_, idx) => idx !== i))
-  return (
-    <div className={cn('flex flex-wrap items-center gap-2', className)}>
-      {value.map((fv, i) => (
-        <FilterBadge key={i} filter={fv} def={filters.find((f) => f.key === fv.key)} onRemove={() => remove(i)} />
-      ))}
-      <AddFilterPopover filters={filters} onAdd={(fv) => onChange([...value, fv])} />
-    </div>
-  )
-}
+export * from './Filters/index'

package/src/advanced/kanban.tsx

@@ -1,95 +1 @@
-import React from 'react'
-import { DndContext, DragEndEvent, DragOverEvent, DragOverlay, DragStartEvent, PointerSensor, useSensor, useSensors } from '@dnd-kit/core'
-import { SortableContext, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable'
-import { CSS } from '@dnd-kit/utilities'
-import { cn } from '../utils/cn'
-
-export interface KanbanCardDef { id: string; title: string; description?: string; badge?: string }
-export interface KanbanColumnDef { id: string; title: string; cards: KanbanCardDef[] }
-
-export function KanbanCard({ card, isDragging }: { card: KanbanCardDef; isDragging?: boolean }) {
-  const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id: card.id })
-  const style = { transform: CSS.Transform.toString(transform), transition }
-  return (
-    <div ref={setNodeRef} style={style} {...attributes} {...listeners}
-      className={cn('rounded-md border border-[hsl(var(--border))] bg-[hsl(var(--card))] p-3 cursor-grab active:cursor-grabbing select-none', isDragging && 'shadow-lg opacity-80')}>
-      <div className="flex items-start justify-between gap-2">
-        <p className="text-sm font-medium text-[hsl(var(--foreground))] leading-tight">{card.title}</p>
-        {card.badge && (
-          <span className="shrink-0 text-[10px] px-1.5 py-0.5 rounded-full bg-[hsl(var(--primary)/0.1)] text-[hsl(var(--primary))] font-medium">{card.badge}</span>
-        )}
-      </div>
-      {card.description && <p className="mt-1 text-xs text-[hsl(var(--muted-foreground))] line-clamp-2">{card.description}</p>}
-    </div>
-  )
-}
-
-export function KanbanColumn({ column, isOver }: { column: KanbanColumnDef; isOver?: boolean }) {
-  return (
-    <div className={cn('flex w-64 shrink-0 flex-col gap-2 rounded-md bg-[hsl(var(--muted)/0.4)] p-3 transition-colors', isOver && 'bg-[hsl(var(--muted)/0.7)]')}>
-      <div className="flex items-center justify-between">
-        <h3 className="text-sm font-semibold text-[hsl(var(--foreground))]">{column.title}</h3>
-        <span className="text-xs text-[hsl(var(--muted-foreground))] bg-[hsl(var(--muted))] rounded-full px-2 py-0.5">{column.cards.length}</span>
-      </div>
-      <SortableContext items={column.cards.map((c) => c.id)} strategy={verticalListSortingStrategy}>
-        <div className="flex flex-col gap-2 min-h-[60px]">
-          {column.cards.map((card) => <KanbanCard key={card.id} card={card} />)}
-        </div>
-      </SortableContext>
-    </div>
-  )
-}
-
-interface KanbanProps {
-  columns: KanbanColumnDef[]
-  onMoveCard?: (cardId: string, fromCol: string, toCol: string) => void
-  className?: string
-}
-
-export function Kanban({ columns: initialColumns, onMoveCard, className }: KanbanProps) {
-  const [cols, setCols] = React.useState<KanbanColumnDef[]>(initialColumns)
-  const [activeCard, setActiveCard] = React.useState<KanbanCardDef | null>(null)
-  const [overColId, setOverColId] = React.useState<string | null>(null)
-
-  const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 5 } }))
-
-  const findColByCard = (cardId: string) => cols.find((c) => c.cards.some((card) => card.id === cardId))
-
-  const onDragStart = ({ active }: DragStartEvent) => {
-    const col = findColByCard(active.id as string)
-    setActiveCard(col?.cards.find((c) => c.id === active.id) ?? null)
-  }
-
-  const onDragOver = ({ over }: DragOverEvent) => {
-    if (!over) { setOverColId(null); return }
-    const colId = cols.find((c) => c.id === over.id)?.id ?? findColByCard(over.id as string)?.id ?? null
-    setOverColId(colId)
-  }
-
-  const onDragEnd = ({ active, over }: DragEndEvent) => {
-    setActiveCard(null); setOverColId(null)
-    if (!over || active.id === over.id) return
-    const fromCol = findColByCard(active.id as string)
-    const toCol = cols.find((c) => c.id === over.id) ?? findColByCard(over.id as string)
-    if (!fromCol || !toCol || fromCol.id === toCol.id) return
-
-    const card = fromCol.cards.find((c) => c.id === active.id)!
-    setCols((prev) => prev.map((c) => {
-      if (c.id === fromCol.id) return { ...c, cards: c.cards.filter((card) => card.id !== active.id) }
-      if (c.id === toCol.id) return { ...c, cards: [...c.cards, card] }
-      return c
-    }))
-    onMoveCard?.(active.id as string, fromCol.id, toCol.id)
-  }
-
-  return (
-    <DndContext sensors={sensors} onDragStart={onDragStart} onDragOver={onDragOver} onDragEnd={onDragEnd}>
-      <div className={cn('flex gap-4 overflow-x-auto pb-4', className)}>
-        {cols.map((col) => <KanbanColumn key={col.id} column={col} isOver={overColId === col.id} />)}
-      </div>
-      <DragOverlay>
-        {activeCard && <KanbanCard card={activeCard} isDragging />}
-      </DragOverlay>
-    </DndContext>
-  )
-}
+export * from './Kanban/index'

package/src/advanced/toggle-button.tsx

@@ -1,78 +1 @@
-import React from 'react'
-import { cn } from '../utils/cn'
-
-interface ToggleButtonProps {
-  value: string
-  pressed?: boolean
-  onClick?: () => void
-  disabled?: boolean
-  children: React.ReactNode
-  className?: string
-}
-
-export function ToggleButton({ pressed, onClick, disabled, children, className }: ToggleButtonProps) {
-  return (
-    <button
-      type="button"
-      aria-pressed={pressed}
-      disabled={disabled}
-      onClick={onClick}
-      className={cn(
-        'inline-flex items-center justify-center gap-1.5 rounded-md px-3 py-1.5 text-sm font-medium transition-colors border',
-        'disabled:pointer-events-none disabled:opacity-50',
-        pressed
-          ? 'bg-[hsl(var(--primary))] text-[hsl(var(--primary-foreground))] border-[hsl(var(--primary))]'
-          : 'bg-transparent text-[hsl(var(--foreground))] border-[hsl(var(--border))] hover:bg-[hsl(var(--accent))] hover:text-[hsl(var(--accent-foreground))]',
-        className
-      )}
-    >
-      {children}
-    </button>
-  )
-}
-
-interface ToggleButtonGroupSingle {
-  type?: 'single'
-  value: string
-  onChange: (v: string) => void
-}
-
-interface ToggleButtonGroupMultiple {
-  type: 'multiple'
-  value: string[]
-  onChange: (v: string[]) => void
-}
-
-type ToggleButtonGroupProps = (ToggleButtonGroupSingle | ToggleButtonGroupMultiple) & {
-  children: React.ReactNode
-  className?: string
-}
-
-export function ToggleButtonGroup(props: ToggleButtonGroupProps) {
-  const { children, className } = props
-
-  const isPressed = (val: string) =>
-    props.type === 'multiple' ? (props.value as string[]).includes(val) : props.value === val
-
-  const handleClick = (val: string) => {
-    if (props.type === 'multiple') {
-      const current = props.value as string[]
-      props.onChange(current.includes(val) ? current.filter((v) => v !== val) : [...current, val])
-    } else {
-      ;(props as ToggleButtonGroupSingle).onChange(val)
-    }
-  }
-
-  return (
-    <div className={cn('inline-flex items-center gap-1 rounded-md border border-[hsl(var(--border))] bg-[hsl(var(--muted)/0.4)] p-0.5', className)}>
-      {React.Children.map(children, (child) => {
-        if (!React.isValidElement(child)) return child
-        const tb = child as React.ReactElement<ToggleButtonProps>
-        return React.cloneElement(tb, {
-          pressed: isPressed(tb.props.value),
-          onClick: () => handleClick(tb.props.value),
-        })
-      })}
-    </div>
-  )
-}
+export * from './ToggleButton'

package/src/blocks/ChatDetail/ChatDetail.tsx

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

package/src/blocks/FeedbackModal/FeedbackModal.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
-import { cn } from '../utils/cn'
-import { Button } from '../primitives/button'
-import { Textarea } from '../primitives/textarea'
+import { cn } from '../../utils/cn'
+import { Button } from '../../primitives/button'
+import { Textarea } from '../../primitives/textarea'
 
 const REACTIONS = ['😊', '😐', '😕', '😡', '🤩']
 

package/src/blocks/FileCards/FileCards.tsx

@@ -1,8 +1,8 @@
 // @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'
+import { cn } from '../../utils/cn'
+import { Card, CardContent } from '../../primitives/card'
 
 interface FileItem { id: string; name: string; type: string; size: string; modified: string }
 

package/src/blocks/FilesList/FilesList.tsx

@@ -1,11 +1,11 @@
 // @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 { cn } from '../../utils/cn'
+import { Button } from '../../primitives/button'
 import {
   DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger,
-} from '../primitives/dropdown-menu'
+} from '../../primitives/dropdown-menu'
 
 interface FileItem { id: string; name: string; type: string; size: string; modified: string }
 

package/src/blocks/IntegrationCard/IntegrationCard.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
-import { cn } from '../utils/cn'
-import { Badge } from '../primitives/badge'
-import { Button } from '../primitives/button'
+import { cn } from '../../utils/cn'
+import { Badge } from '../../primitives/badge'
+import { Button } from '../../primitives/button'
 
 export interface IntegrationCardProps {
   icon?: React.ReactNode

package/src/blocks/InviteModal/InviteModal.tsx

@@ -1,11 +1,11 @@
 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'
+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' },
@@ -53,7 +53,7 @@ export function InviteModal({ className }: InviteModalProps) {
           <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>
+                <Avatar className="h-6 w-6"><AvatarFallback className="text-[10px]">{p.email.charAt(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))}>

package/src/blocks/ManageTagsModal/ManageTagsModal.tsx

@@ -1,8 +1,8 @@
 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'
+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']
 
@@ -25,7 +25,7 @@ export function ManageTagsModal({ className }: ManageTagsModalProps) {
   const addTag = () => {
     if (!newTag.trim()) return
     const id = `tag-${Date.now()}`
-    setTags(t => [...t, { id, name: newTag.trim(), color: COLORS[colorIdx % COLORS.length] }])
+    setTags(t => [...t, { id, name: newTag.trim(), color: COLORS[colorIdx % COLORS.length]! }])
     setNewTag('')
     setColorIdx(i => i + 1)
   }