@otfdashkit/ui 0.1.1 → 0.1.2

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

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

package/src/blocks/messages-card.tsx

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

package/src/blocks/metric-card.tsx

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

package/src/blocks/notification-settings.tsx

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

package/src/blocks/organization-menu.tsx

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

package/src/blocks/roles-menu.tsx

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

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

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

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'