@otfdashkit/ui 0.1.0

package/src/blocks/RolesMenu/RolesMenu.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/RolesMenu/index.ts

@@ -0,0 +1,2 @@
+// @tier: stub — full checklist in Phase 3
+export * from './RolesMenu'

package/src/blocks/SelectUsersModal/SelectUsersModal.stories.tsx

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { SelectUsersModal } from './SelectUsersModal'
+
+// TODO: add all variants
+const meta: Meta<typeof SelectUsersModal> = {
+  title: 'Blocks/SelectUsersModal',
+  component: SelectUsersModal,
+  tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj<typeof SelectUsersModal>
+
+export const Default: Story = {}

package/src/blocks/SelectUsersModal/SelectUsersModal.test.tsx

@@ -0,0 +1,9 @@
+import { render } from '@testing-library/react'
+import { SelectUsersModal } from './SelectUsersModal'
+
+// TODO: add full a11y + variant tests
+describe('SelectUsersModal', () => {
+  it('renders without throwing', () => {
+    expect(() => render(<SelectUsersModal />)).not.toThrow()
+  })
+})

package/src/blocks/SelectUsersModal/SelectUsersModal.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/SelectUsersModal/index.ts

@@ -0,0 +1,2 @@
+// @tier: stub — full checklist in Phase 3
+export * from './SelectUsersModal'

package/src/blocks/SidebarLayoutDashboard/SidebarLayoutDashboard.stories.tsx

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { SidebarLayoutDashboard } from './SidebarLayoutDashboard'
+
+// TODO: add all variants
+const meta: Meta<typeof SidebarLayoutDashboard> = {
+  title: 'Blocks/SidebarLayoutDashboard',
+  component: SidebarLayoutDashboard,
+  tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj<typeof SidebarLayoutDashboard>
+
+export const Default: Story = {}

package/src/blocks/SidebarLayoutDashboard/SidebarLayoutDashboard.test.tsx

@@ -0,0 +1,9 @@
+import { render } from '@testing-library/react'
+import { SidebarLayoutDashboard } from './SidebarLayoutDashboard'
+
+// TODO: add full a11y + variant tests
+describe('SidebarLayoutDashboard', () => {
+  it('renders without throwing', () => {
+    expect(() => render(<SidebarLayoutDashboard />)).not.toThrow()
+  })
+})

package/src/blocks/SidebarLayoutDashboard/SidebarLayoutDashboard.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/SidebarLayoutDashboard/index.ts

@@ -0,0 +1,2 @@
+// @tier: stub — full checklist in Phase 3
+export * from './SidebarLayoutDashboard'

package/src/blocks/SidebarLayoutGroups/SidebarLayoutGroups.stories.tsx

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { SidebarLayoutGroups } from './SidebarLayoutGroups'
+
+// TODO: add all variants
+const meta: Meta<typeof SidebarLayoutGroups> = {
+  title: 'Blocks/SidebarLayoutGroups',
+  component: SidebarLayoutGroups,
+  tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj<typeof SidebarLayoutGroups>
+
+export const Default: Story = {}

package/src/blocks/SidebarLayoutGroups/SidebarLayoutGroups.test.tsx

@@ -0,0 +1,9 @@
+import { render } from '@testing-library/react'
+import { SidebarLayoutGroups } from './SidebarLayoutGroups'
+
+// TODO: add full a11y + variant tests
+describe('SidebarLayoutGroups', () => {
+  it('renders without throwing', () => {
+    expect(() => render(<SidebarLayoutGroups />)).not.toThrow()
+  })
+})

package/src/blocks/SidebarLayoutGroups/SidebarLayoutGroups.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>
+  )
+}

package/src/blocks/SidebarLayoutGroups/index.ts

@@ -0,0 +1,2 @@
+// @tier: stub — full checklist in Phase 3
+export * from './SidebarLayoutGroups'

package/src/blocks/SidebarLayoutMinimal/SidebarLayoutMinimal.stories.tsx

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { SidebarLayoutMinimal } from './SidebarLayoutMinimal'
+
+// TODO: add all variants
+const meta: Meta<typeof SidebarLayoutMinimal> = {
+  title: 'Blocks/SidebarLayoutMinimal',
+  component: SidebarLayoutMinimal,
+  tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj<typeof SidebarLayoutMinimal>
+
+export const Default: Story = {}

package/src/blocks/SidebarLayoutMinimal/SidebarLayoutMinimal.test.tsx

@@ -0,0 +1,9 @@
+import { render } from '@testing-library/react'
+import { SidebarLayoutMinimal } from './SidebarLayoutMinimal'
+
+// TODO: add full a11y + variant tests
+describe('SidebarLayoutMinimal', () => {
+  it('renders without throwing', () => {
+    expect(() => render(<SidebarLayoutMinimal />)).not.toThrow()
+  })
+})

package/src/blocks/SidebarLayoutMinimal/SidebarLayoutMinimal.tsx

@@ -0,0 +1,73 @@
+// @ts-nocheck
+import React from 'react'
+import { LayoutDashboard, FolderOpen, Users, Settings } from 'lucide-react'
+import { cn } from '../utils/cn'
+import { Avatar, AvatarFallback } from '../primitives/avatar'
+import { Separator } from '../primitives/separator'
+
+const NAV_ITEMS = [
+  { icon: LayoutDashboard, label: 'Dashboard', active: true },
+  { icon: FolderOpen, label: 'Projects' },
+  { icon: Users, label: 'Team' },
+  { icon: Settings, label: 'Settings' },
+]
+
+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 SidebarLayoutMinimalProps {
+  brandName?: string
+  pageTitle?: string
+  children?: React.ReactNode
+  className?: string
+}
+
+export function SidebarLayoutMinimal({
+  brandName = 'Acme Inc',
+  pageTitle = 'Dashboard',
+  children,
+  className,
+}: SidebarLayoutMinimalProps) {
+  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 space-y-0.5 p-2">
+          {NAV_ITEMS.map(item => <NavItem key={item.label} {...item} />)}
+        </nav>
+        <Separator />
+        <div className="flex items-center gap-3 p-4">
+          <Avatar className="h-8 w-8">
+            <AvatarFallback className="text-xs">JD</AvatarFallback>
+          </Avatar>
+          <div className="min-w-0">
+            <p className="truncate text-sm font-medium">Jane Doe</p>
+            <p className="truncate text-xs text-[hsl(var(--muted-foreground))]">jane@acme.com</p>
+          </div>
+        </div>
+      </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>
+  )
+}

package/src/blocks/SidebarLayoutMinimal/index.ts

@@ -0,0 +1,2 @@
+// @tier: stub — full checklist in Phase 3
+export * from './SidebarLayoutMinimal'

package/src/blocks/SidebarLayoutSearch/SidebarLayoutSearch.stories.tsx

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { SidebarLayoutSearch } from './SidebarLayoutSearch'
+
+// TODO: add all variants
+const meta: Meta<typeof SidebarLayoutSearch> = {
+  title: 'Blocks/SidebarLayoutSearch',
+  component: SidebarLayoutSearch,
+  tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj<typeof SidebarLayoutSearch>
+
+export const Default: Story = {}

package/src/blocks/SidebarLayoutSearch/SidebarLayoutSearch.test.tsx

@@ -0,0 +1,9 @@
+import { render } from '@testing-library/react'
+import { SidebarLayoutSearch } from './SidebarLayoutSearch'
+
+// TODO: add full a11y + variant tests
+describe('SidebarLayoutSearch', () => {
+  it('renders without throwing', () => {
+    expect(() => render(<SidebarLayoutSearch />)).not.toThrow()
+  })
+})

package/src/blocks/SidebarLayoutSearch/SidebarLayoutSearch.tsx

@@ -0,0 +1,79 @@
+// @ts-nocheck
+import React, { useState } from 'react'
+import { LayoutDashboard, FolderOpen, Users, Settings, BarChart2, Bell } from 'lucide-react'
+import { cn } from '../utils/cn'
+import { Input } from '../primitives/input'
+import { Separator } from '../primitives/separator'
+
+const ALL_ITEMS = [
+  { icon: LayoutDashboard, label: 'Dashboard', active: true },
+  { icon: BarChart2, label: 'Analytics' },
+  { icon: FolderOpen, label: 'Projects' },
+  { icon: Users, label: 'Team' },
+  { icon: Bell, label: 'Notifications' },
+  { icon: Settings, label: 'Settings' },
+]
+
+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 SidebarLayoutSearchProps {
+  brandName?: string
+  pageTitle?: string
+  children?: React.ReactNode
+  className?: string
+}
+
+export function SidebarLayoutSearch({
+  brandName = 'Acme Inc',
+  pageTitle = 'Dashboard',
+  children,
+  className,
+}: SidebarLayoutSearchProps) {
+  const [query, setQuery] = useState('')
+  const filtered = ALL_ITEMS.filter(i => i.label.toLowerCase().includes(query.toLowerCase()))
+
+  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 />
+        <div className="p-2">
+          <Input
+            placeholder="Search..."
+            value={query}
+            onChange={e => setQuery(e.target.value)}
+            className="h-8 text-sm"
+          />
+        </div>
+        <nav className="flex-1 space-y-0.5 overflow-auto p-2">
+          {filtered.length > 0
+            ? filtered.map(item => <NavItem key={item.label} {...item} />)
+            : <p className="px-3 py-2 text-xs text-[hsl(var(--muted-foreground))]">No results</p>
+          }
+        </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>
+  )
+}

package/src/blocks/SidebarLayoutSearch/index.ts

@@ -0,0 +1,2 @@
+// @tier: stub — full checklist in Phase 3
+export * from './SidebarLayoutSearch'

package/src/blocks/SidebarLayoutUser/SidebarLayoutUser.stories.tsx

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { SidebarLayoutUser } from './SidebarLayoutUser'
+
+// TODO: add all variants
+const meta: Meta<typeof SidebarLayoutUser> = {
+  title: 'Blocks/SidebarLayoutUser',
+  component: SidebarLayoutUser,
+  tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj<typeof SidebarLayoutUser>
+
+export const Default: Story = {}

package/src/blocks/SidebarLayoutUser/SidebarLayoutUser.test.tsx

@@ -0,0 +1,9 @@
+import { render } from '@testing-library/react'
+import { SidebarLayoutUser } from './SidebarLayoutUser'
+
+// TODO: add full a11y + variant tests
+describe('SidebarLayoutUser', () => {
+  it('renders without throwing', () => {
+    expect(() => render(<SidebarLayoutUser />)).not.toThrow()
+  })
+})