@otfdashkit/ui 0.1.1 → 0.1.3

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

@@ -1,97 +1 @@
-// @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>
-  )
-}
+export * from './SidebarLayoutDashboard'

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

@@ -1,79 +1 @@
-// @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>
-  )
-}
+export * from './SidebarLayoutGroups'

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

@@ -1,73 +1 @@
-// @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>
-  )
-}
+export * from './SidebarLayoutMinimal'

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

@@ -1,79 +1 @@
-// @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>
-  )
-}
+export * from './SidebarLayoutSearch'

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

@@ -1,82 +1 @@
-// @ts-nocheck
-import React from 'react'
-import { LayoutDashboard, FolderOpen, Users, Settings, Bell } from 'lucide-react'
-import { cn } from '../utils/cn'
-import { Avatar, AvatarFallback } from '../primitives/avatar'
-import { Badge } from '../primitives/badge'
-import { Separator } from '../primitives/separator'
-
-const NAV_ITEMS = [
-  { icon: LayoutDashboard, label: 'Dashboard', active: true },
-  { icon: FolderOpen, label: 'Projects' },
-  { icon: Users, label: 'Team' },
-  { icon: Bell, label: 'Notifications', badge: '3' },
-  { icon: Settings, label: 'Settings' },
-]
-
-interface NavItemProps { icon: React.ElementType; label: string; active?: boolean; badge?: string }
-
-function NavItem({ icon: Icon, label, active, badge }: 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" />
-      <span className="flex-1 text-left">{label}</span>
-      {badge && <Badge className="text-[10px] px-1.5 py-0.5 shrink-0">{badge}</Badge>}
-    </button>
-  )
-}
-
-export interface SidebarLayoutUserProps {
-  userName?: string
-  userEmail?: string
-  userRole?: string
-  pageTitle?: string
-  children?: React.ReactNode
-  className?: string
-}
-
-export function SidebarLayoutUser({
-  userName = 'Jane Doe',
-  userEmail = 'jane@acme.com',
-  userRole = 'Admin',
-  pageTitle = 'Dashboard',
-  children,
-  className,
-}: SidebarLayoutUserProps) {
-  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="p-4">
-          <div className="flex items-center gap-3 rounded-md bg-[hsl(var(--accent))] p-3">
-            <Avatar className="h-9 w-9">
-              <AvatarFallback className="text-xs">{userName.slice(0, 2).toUpperCase()}</AvatarFallback>
-            </Avatar>
-            <div className="min-w-0">
-              <p className="truncate text-sm font-semibold">{userName}</p>
-              <p className="truncate text-xs text-[hsl(var(--muted-foreground))]">{userRole}</p>
-            </div>
-          </div>
-        </div>
-        <Separator />
-        <nav className="flex-1 space-y-0.5 p-2">
-          {NAV_ITEMS.map(item => <NavItem key={item.label} {...item} />)}
-        </nav>
-        <Separator />
-        <p className="p-4 text-xs text-[hsl(var(--muted-foreground))] truncate">{userEmail}</p>
-      </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>
-  )
-}
+export * from './SidebarLayoutUser'

package/src/blocks/sortable-task-list.tsx

@@ -1,70 +1 @@
-import React, { useState } from 'react'
-import { cn } from '../utils/cn'
-import { Checkbox } from '../primitives/checkbox'
-import { Avatar, AvatarFallback } from '../primitives/avatar'
-
-type Priority = 'High' | 'Medium' | 'Low'
-type Status = 'In Progress' | 'Todo' | 'Done'
-
-interface Task {
-  id: string
-  title: string
-  assignee: string
-  priority: Priority
-  status: Status
-  done: boolean
-}
-
-const TASKS: Task[] = [
-  { id: '1', title: 'Redesign onboarding flow', assignee: 'AC', priority: 'High', status: 'In Progress', done: false },
-  { id: '2', title: 'Fix authentication bug', assignee: 'BS', priority: 'High', status: 'In Progress', done: false },
-  { id: '3', title: 'Write API documentation', assignee: 'JD', priority: 'Medium', status: 'Todo', done: false },
-  { id: '4', title: 'Add dark mode support', assignee: 'TR', priority: 'Low', status: 'Todo', done: false },
-  { id: '5', title: 'Setup CI/CD pipeline', assignee: 'SK', priority: 'Medium', status: 'Done', done: true },
-  { id: '6', title: 'Deploy to staging', assignee: 'ML', priority: 'Low', status: 'Done', done: true },
-]
-
-const PRIORITY_DOT: Record<Priority, string> = {
-  High: 'bg-red-500',
-  Medium: 'bg-yellow-500',
-  Low: 'bg-green-500',
-}
-
-const SECTIONS: Status[] = ['In Progress', 'Todo', 'Done']
-
-function TaskRow({ task, onToggle }: { task: Task; onToggle: () => void }) {
-  return (
-    <div className="flex items-center gap-3 px-3 py-2.5 hover:bg-[hsl(var(--accent)/0.5)] rounded-md transition-colors">
-      <Checkbox checked={task.done} onCheckedChange={onToggle} />
-      <span className={cn('flex-1 text-sm', task.done && 'line-through text-[hsl(var(--muted-foreground))]')}>{task.title}</span>
-      <span className={cn('h-2 w-2 rounded-full shrink-0', PRIORITY_DOT[task.priority])} title={task.priority} />
-      <Avatar className="h-6 w-6 shrink-0"><AvatarFallback className="text-[10px]">{task.assignee}</AvatarFallback></Avatar>
-    </div>
-  )
-}
-
-export interface SortableTaskListProps { className?: string }
-
-export function SortableTaskList({ className }: SortableTaskListProps) {
-  const [tasks, setTasks] = useState(TASKS)
-  const toggle = (id: string) => setTasks(ts => ts.map(t => t.id === id ? { ...t, done: !t.done } : t))
-
-  return (
-    <div className={cn('rounded-md border border-[hsl(var(--border))] bg-[hsl(var(--card))] p-4 space-y-4', className)}>
-      {SECTIONS.map(section => {
-        const items = tasks.filter(t => t.status === section)
-        return (
-          <div key={section}>
-            <div className="flex items-center gap-2 mb-1.5">
-              <p className="text-xs font-semibold text-[hsl(var(--muted-foreground))] uppercase tracking-wide">{section}</p>
-              <span className="text-xs text-[hsl(var(--muted-foreground))]">({items.length})</span>
-            </div>
-            <div className="space-y-0.5">
-              {items.map(task => <TaskRow key={task.id} task={task} onToggle={() => toggle(task.id)} />)}
-            </div>
-          </div>
-        )
-      })}
-    </div>
-  )
-}
+export * from './SortableTaskList'

package/src/blocks/stacked-layout-branded.tsx

@@ -1,64 +1 @@
-import React from 'react'
-import { Bell, ChevronDown, ArrowRight } from 'lucide-react'
-import { cn } from '../utils/cn'
-import { Avatar, AvatarFallback } from '../primitives/avatar'
-import { Button } from '../primitives/button'
-import { Card, CardContent, CardHeader, CardTitle } from '../primitives/card'
-
-const NAV_LINKS = ['Features', 'Pricing', 'Docs', 'Blog']
-
-export interface StackedLayoutBrandedProps {
-  brandName?: string
-  children?: React.ReactNode
-  className?: string
-}
-
-export function StackedLayoutBranded({
-  brandName = 'Acme',
-  children,
-  className,
-}: StackedLayoutBrandedProps) {
-  return (
-    <div className={cn('flex h-[600px] flex-col overflow-hidden rounded-md border border-[hsl(var(--border))] bg-[hsl(var(--background))]', className)}>
-      <nav className="flex h-14 items-center gap-6 bg-[hsl(var(--primary))] px-6">
-        <span className="font-bold text-sm text-[hsl(var(--primary-foreground))] shrink-0">{brandName}</span>
-        <div className="flex flex-1 items-center gap-1">
-          {NAV_LINKS.map(link => (
-            <button key={link} className="px-3 py-1.5 text-sm text-[hsl(var(--primary-foreground)/0.8)] hover:text-[hsl(var(--primary-foreground))] transition-colors rounded-md hover:bg-white/10">
-              {link}
-            </button>
-          ))}
-        </div>
-        <div className="flex items-center gap-3">
-          <Bell className="h-4 w-4 text-[hsl(var(--primary-foreground)/0.8)]" />
-          <div className="flex items-center gap-1.5 cursor-pointer">
-            <Avatar className="h-7 w-7 ring-2 ring-white/30">
-              <AvatarFallback className="bg-white/20 text-[hsl(var(--primary-foreground))] text-xs">JD</AvatarFallback>
-            </Avatar>
-            <ChevronDown className="h-3 w-3 text-[hsl(var(--primary-foreground)/0.8)]" />
-          </div>
-        </div>
-      </nav>
-      <main className="flex-1 overflow-auto">
-        {children ?? (
-          <div className="p-6 space-y-6">
-            <div>
-              <h1 className="text-xl font-bold">Welcome back, Jane</h1>
-              <p className="text-sm text-[hsl(var(--muted-foreground))] mt-1">Here's what's happening today.</p>
-            </div>
-            <div className="grid gap-4" style={{ gridTemplateColumns: 'repeat(auto-fill, minmax(min(100%,200px),1fr))' }}>
-              {['Get Started', 'View Analytics', 'Manage Team'].map(action => (
-                <Card key={action} className="cursor-pointer hover:shadow-md transition-shadow">
-                  <CardContent className="p-4 flex items-center justify-between">
-                    <span className="text-sm font-medium">{action}</span>
-                    <ArrowRight className="h-4 w-4 text-[hsl(var(--muted-foreground))]" />
-                  </CardContent>
-                </Card>
-              ))}
-            </div>
-          </div>
-        )}
-      </main>
-    </div>
-  )
-}
+export * from './StackedLayoutBranded'

package/src/blocks/stacked-layout-tabs.tsx

@@ -1,80 +1 @@
-import React, { useState } from 'react'
-import { Bell, ChevronDown } from 'lucide-react'
-import { cn } from '../utils/cn'
-import { Avatar, AvatarFallback } from '../primitives/avatar'
-import { Button } from '../primitives/button'
-import { Separator } from '../primitives/separator'
-
-const NAV_LINKS = ['Home', 'Projects', 'Analytics', 'Team']
-const TABS = ['Overview', 'Activity', 'Settings', 'Billing']
-
-export interface StackedLayoutTabsProps {
-  brandName?: string
-  children?: React.ReactNode
-  className?: string
-}
-
-export function StackedLayoutTabs({
-  brandName = 'Acme Inc',
-  children,
-  className,
-}: StackedLayoutTabsProps) {
-  const [activeTab, setActiveTab] = useState(0)
-  const [activeNav, setActiveNav] = useState(0)
-
-  return (
-    <div className={cn('flex h-[600px] flex-col overflow-hidden rounded-md border border-[hsl(var(--border))] bg-[hsl(var(--background))]', className)}>
-      <nav className="flex h-14 items-center gap-6 border-b border-[hsl(var(--border))] bg-[hsl(var(--card))] px-4">
-        <span className="font-semibold text-sm shrink-0">{brandName}</span>
-        <div className="flex flex-1 items-center gap-1">
-          {NAV_LINKS.map((link, i) => (
-            <button
-              key={link}
-              onClick={() => setActiveNav(i)}
-              className={cn(
-                'px-3 py-1.5 text-sm rounded-md transition-colors',
-                i === activeNav
-                  ? 'bg-[hsl(var(--accent))] font-medium'
-                  : 'text-[hsl(var(--muted-foreground))] hover:bg-[hsl(var(--accent))]'
-              )}
-            >
-              {link}
-            </button>
-          ))}
-        </div>
-        <div className="flex items-center gap-2">
-          <Bell className="h-4 w-4 text-[hsl(var(--muted-foreground))]" />
-          <div className="flex items-center gap-1.5 cursor-pointer">
-            <Avatar className="h-7 w-7"><AvatarFallback className="text-xs">JD</AvatarFallback></Avatar>
-            <ChevronDown className="h-3 w-3 text-[hsl(var(--muted-foreground))]" />
-          </div>
-        </div>
-      </nav>
-      <div className="border-b border-[hsl(var(--border))] bg-[hsl(var(--card))] px-4">
-        <div className="flex gap-4">
-          {TABS.map((tab, i) => (
-            <button
-              key={tab}
-              onClick={() => setActiveTab(i)}
-              className={cn(
-                'py-3 text-sm transition-colors border-b-2',
-                i === activeTab
-                  ? 'border-[hsl(var(--primary))] font-medium'
-                  : 'border-transparent text-[hsl(var(--muted-foreground))] hover:text-[hsl(var(--foreground))]'
-              )}
-            >
-              {tab}
-            </button>
-          ))}
-        </div>
-      </div>
-      <main className="flex-1 overflow-auto p-6">
-        {children ?? (
-          <div className="text-sm text-[hsl(var(--muted-foreground))]">
-            Content for <strong>{TABS[activeTab]}</strong> tab
-          </div>
-        )}
-      </main>
-    </div>
-  )
-}
+export * from './StackedLayoutTabs'