@otfdashkit/ui 0.1.0

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

@@ -0,0 +1,63 @@
+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>
+  )
+}

package/src/blocks/messages-card.tsx

@@ -0,0 +1,59 @@
+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>
+  )
+}

package/src/blocks/metric-card.tsx

@@ -0,0 +1,79 @@
+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>
+  )
+}

package/src/blocks/notification-settings.tsx

@@ -0,0 +1,61 @@
+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>
+  )
+}

package/src/blocks/organization-menu.tsx

@@ -0,0 +1,85 @@
+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>
+  )
+}

package/src/blocks/roles-menu.tsx

@@ -0,0 +1,61 @@
+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>
+  )
+}

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

@@ -0,0 +1,64 @@
+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>
+  )
+}

package/src/blocks/sidebar-layout-dashboard.tsx

@@ -0,0 +1,97 @@
+// @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'
+
+const NAV_ITEMS = [
+  { icon: LayoutDashboard, label: 'Dashboard', active: true },
+  { icon: FolderOpen, label: 'Projects' },
+  { icon: Users, label: 'Team' },
+  { icon: Settings, label: 'Settings' },
+]
+
+const KPIS = [
+  { label: 'Total Revenue', value: '$48,295', change: '+12.5%' },
+  { label: 'Active Users', value: '2,847', change: '+8.3%' },
+  { label: 'New Orders', value: '384', change: '+3.1%' },
+  { label: 'Conversion', value: '3.24%', change: '-0.4%' },
+]
+
+const TABLE_ROWS = [
+  { name: 'Alpha Project', status: 'Active', team: 'Design', progress: 72 },
+  { name: 'Beta Launch', status: 'Review', team: 'Engineering', progress: 45 },
+  { name: 'Gamma Research', status: 'Active', team: 'Product', progress: 89 },
+]
+
+function NavItem({ icon: Icon, label, active }: { icon: React.ElementType; label: string; active?: boolean }) {
+  return (
+    <button className={cn(
+      'flex w-full items-center gap-3 rounded-md px-3 py-2 text-sm transition-colors',
+      active ? 'bg-[hsl(var(--accent))] font-medium' : 'text-[hsl(var(--muted-foreground))] hover:bg-[hsl(var(--accent))]'
+    )}>
+      <Icon className="h-4 w-4 shrink-0" />
+      {label}
+    </button>
+  )
+}
+
+export interface SidebarLayoutDashboardProps { className?: string }
+
+export function SidebarLayoutDashboard({ className }: SidebarLayoutDashboardProps) {
+  return (
+    <div className={cn('flex h-[600px] overflow-hidden rounded-md border border-[hsl(var(--border))] bg-[hsl(var(--background))]', className)}>
+      <aside className="flex w-56 flex-col border-r border-[hsl(var(--border))] bg-[hsl(var(--card))]">
+        <div className="flex h-12 items-center px-4 font-semibold text-sm">Acme Inc</div>
+        <Separator />
+        <nav className="flex-1 space-y-0.5 p-2">
+          {NAV_ITEMS.map(i => <NavItem key={i.label} {...i} />)}
+        </nav>
+        <Separator />
+        <div className="flex items-center gap-2 p-3">
+          <Avatar className="h-7 w-7"><AvatarFallback className="text-xs">JD</AvatarFallback></Avatar>
+          <span className="truncate text-xs font-medium">Jane Doe</span>
+        </div>
+      </aside>
+      <div className="flex flex-1 flex-col overflow-hidden">
+        <header className="flex h-12 items-center justify-between border-b border-[hsl(var(--border))] px-4">
+          <h1 className="text-sm font-semibold">Dashboard</h1>
+          <button className="relative"><Bell className="h-4 w-4" /><span className="absolute -top-1 -right-1 h-2 w-2 rounded-full bg-[hsl(var(--primary))]" /></button>
+        </header>
+        <div className="flex-1 overflow-auto p-4 space-y-4">
+          <div className="grid gap-3" style={{ gridTemplateColumns: 'repeat(auto-fill, minmax(min(100%,130px),1fr))' }}>
+            {KPIS.map(k => (
+              <Card key={k.label}>
+                <CardContent className="p-3">
+                  <p className="text-xs text-[hsl(var(--muted-foreground))]">{k.label}</p>
+                  <p className="text-lg font-bold mt-0.5">{k.value}</p>
+                  <p className={cn('text-xs flex items-center gap-0.5 mt-0.5', k.change.startsWith('+') ? 'text-green-600' : 'text-red-500')}>
+                    <TrendingUp className="h-3 w-3" />{k.change}
+                  </p>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+          <div className="rounded-md border border-[hsl(var(--border))]">
+            <table className="w-full text-xs">
+              <thead><tr className="border-b border-[hsl(var(--border))]">
+                {['Project', 'Status', 'Team', 'Progress'].map(h => <th key={h} className="px-3 py-2 text-left font-medium text-[hsl(var(--muted-foreground))]">{h}</th>)}
+              </tr></thead>
+              <tbody>{TABLE_ROWS.map(r => (
+                <tr key={r.name} className="border-b border-[hsl(var(--border))] last:border-0">
+                  <td className="px-3 py-2 font-medium">{r.name}</td>
+                  <td className="px-3 py-2"><Badge variant="secondary" className="text-[10px]">{r.status}</Badge></td>
+                  <td className="px-3 py-2 text-[hsl(var(--muted-foreground))]">{r.team}</td>
+                  <td className="px-3 py-2"><div className="h-1.5 w-20 rounded-full bg-[hsl(var(--muted))]"><div className="h-full rounded-full bg-[hsl(var(--primary))]" style={{ width: `${r.progress}%` }} /></div></td>
+                </tr>
+              ))}</tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/blocks/sidebar-layout-groups.tsx

@@ -0,0 +1,79 @@
+// @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'
+
+const NAV_GROUPS = [
+  {
+    label: 'Main',
+    items: [{ icon: LayoutDashboard, label: 'Dashboard', active: true }, { icon: BarChart2, label: 'Analytics' }],
+  },
+  {
+    label: 'Management',
+    items: [{ icon: FolderOpen, label: 'Projects' }, { icon: Users, label: 'Team' }, { icon: CreditCard, label: 'Billing' }],
+  },
+  {
+    label: 'Account',
+    items: [{ icon: Settings, label: 'Settings' }, { icon: HelpCircle, label: 'Help' }],
+  },
+]
+
+interface NavItemProps { icon: React.ElementType; label: string; active?: boolean }
+
+function NavItem({ icon: Icon, label, active }: NavItemProps) {
+  return (
+    <button className={cn(
+      'flex w-full items-center gap-3 rounded-md px-3 py-2 text-sm transition-colors',
+      active
+        ? 'bg-[hsl(var(--accent))] text-[hsl(var(--accent-foreground))] font-medium'
+        : 'text-[hsl(var(--muted-foreground))] hover:bg-[hsl(var(--accent))] hover:text-[hsl(var(--accent-foreground))]'
+    )}>
+      <Icon className="h-4 w-4 shrink-0" />
+      {label}
+    </button>
+  )
+}
+
+export interface SidebarLayoutGroupsProps {
+  brandName?: string
+  pageTitle?: string
+  children?: React.ReactNode
+  className?: string
+}
+
+export function SidebarLayoutGroups({
+  brandName = 'Acme Inc',
+  pageTitle = 'Dashboard',
+  children,
+  className,
+}: SidebarLayoutGroupsProps) {
+  return (
+    <div className={cn('flex h-[600px] overflow-hidden rounded-md border border-[hsl(var(--border))] bg-[hsl(var(--background))]', className)}>
+      <aside className="flex w-60 flex-col border-r border-[hsl(var(--border))] bg-[hsl(var(--card))]">
+        <div className="flex h-14 items-center px-4 font-semibold text-sm">{brandName}</div>
+        <Separator />
+        <nav className="flex-1 overflow-auto p-2 space-y-4">
+          {NAV_GROUPS.map(group => (
+            <div key={group.label}>
+              <p className="mb-1 px-3 text-[10px] font-semibold uppercase tracking-wider text-[hsl(var(--muted-foreground))]">
+                {group.label}
+              </p>
+              <div className="space-y-0.5">
+                {group.items.map(item => <NavItem key={item.label} {...item} />)}
+              </div>
+            </div>
+          ))}
+        </nav>
+      </aside>
+      <main className="flex flex-1 flex-col overflow-auto">
+        <header className="flex h-14 items-center border-b border-[hsl(var(--border))] px-6">
+          <h1 className="text-sm font-semibold">{pageTitle}</h1>
+        </header>
+        <div className="flex-1 p-6 text-sm text-[hsl(var(--muted-foreground))]">
+          {children ?? 'Page content goes here.'}
+        </div>
+      </main>
+    </div>
+  )
+}