@otfdashkit/ui 0.1.1 → 0.1.2

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)
   }

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 />