COMPONENTS

import { Button, Card, Badge, BarChart, KPICard } from '@fabrk/components'
import { cn } from '@fabrk/core'
import { mode } from '@fabrk/design-system'

// RULE 1: Full borders — ALWAYS add mode.radius
<Card className={cn("border border-border", mode.radius)}>
<div className={cn("border-2 border-border", mode.radius)}>

// RULE 2: Partial borders — NEVER add mode.radius
<div className="border-t border-border">
<div className="border-b border-border">

// RULE 3: Table cells — NEVER add mode.radius (breaks layout)
<td className="border-b border-border px-4 py-3">

// RULE 4: Switches — Always rounded-full (pill-shaped)
<Switch className="rounded-full">

// RULE 5: Button text — UPPERCASE with > prefix
<Button>> SUBMIT</Button>
<Button>> CONTINUE</Button>

// RULE 6: Labels — UPPERCASE in brackets
<Badge>[ACTIVE]</Badge>
<span>[SYSTEM]</span>

// RULE 7: Use design tokens — NEVER hardcode colors
className="bg-primary text-primary-foreground"  // correct
className="bg-blue-500 text-white"              // WRONG

import { KPICard } from '@fabrk/components'

<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
  <KPICard title="REVENUE" value="$12,340" trend={12.5} />
  <KPICard title="USERS" value="1,572" trend={8.3} />
  <KPICard title="ERRORS" value="3" trend={-50.0} />
  <KPICard title="UPTIME" value="99.9%" trend={0.1} />
</div>

import { DataTable } from '@fabrk/components'

const columns = [
  { key: 'name', label: 'NAME', sortable: true },
  { key: 'email', label: 'EMAIL', sortable: true },
  { key: 'role', label: 'ROLE' },
  { key: 'status', label: 'STATUS' },
]

const data = [
  { name: 'Jason', email: 'jason@example.com', role: 'Admin', status: 'Active' },
  { name: 'Sarah', email: 'sarah@example.com', role: 'Member', status: 'Active' },
  { name: 'Mike', email: 'mike@example.com', role: 'Member', status: 'Invited' },
]

<DataTable
  columns={columns}
  data={data}
  onSort={(key, direction) => console.log(key, direction)}
  onRowClick={(row) => router.push(`/users/${row.id}`)}
/>

import { BarChart, LineChart, Card } from '@fabrk/components'
import { cn } from '@fabrk/core'
import { mode } from '@fabrk/design-system'

const revenueData = [
  { label: 'Jan', value: 4200 },
  { label: 'Feb', value: 5100 },
  { label: 'Mar', value: 4800 },
  { label: 'Apr', value: 6300 },
  { label: 'May', value: 7200 },
]

// Bar chart
<Card className={cn('p-6 border border-border', mode.radius)}>
  <h3 className={cn('text-xs uppercase mb-4', mode.font)}>[MONTHLY REVENUE]</h3>
  <BarChart data={revenueData} />
</Card>

// Line chart
<Card className={cn('p-6 border border-border', mode.radius)}>
  <h3 className={cn('text-xs uppercase mb-4', mode.font)}>[TREND]</h3>
  <LineChart data={revenueData} />
</Card>

import { DonutChart, Gauge } from '@fabrk/components'

// Donut chart with center label
<DonutChart
  data={[
    { label: 'Desktop', value: 62 },
    { label: 'Mobile', value: 28 },
    { label: 'Tablet', value: 10 },
  ]}
  centerLabel="TRAFFIC"
/>

// Circular gauge
<Gauge value={73} max={100} label="CPU USAGE" />

import {
  ChatInput, ChatMessageList, ChatSidebar, TokenCounter, UsageBar
} from '@fabrk/components'

function AIChat({ messages, conversations, onSend, onSelectConversation }) {
  return (
    <div className="flex h-screen">
      {/* Conversation sidebar */}
      <ChatSidebar
        conversations={conversations}
        onSelect={onSelectConversation}
        onNew={() => createConversation()}
      />

      {/* Main chat area */}
      <div className="flex-1 flex flex-col">
        <div className="flex items-center justify-between p-4 border-b border-border">
          <h2 className="text-sm font-bold uppercase">[CHAT]</h2>
          <TokenCounter used={1250} limit={4096} />
        </div>

        <ChatMessageList messages={messages} className="flex-1" />

        <div className="p-4 border-t border-border">
          <UsageBar used={23.50} limit={50} label="DAILY BUDGET" />
          <ChatInput onSend={onSend} placeholder="Ask anything..." />
        </div>
      </div>
    </div>
  )
}

import {
  NotificationCenter, NotificationBadge, NotificationList
} from '@fabrk/components'

// Dropdown notification center
<NotificationCenter
  notifications={notifications}
  onMarkRead={(id) => markAsRead(id)}
  onMarkAllRead={() => markAllRead()}
/>

// Or build your own with parts
<div className="relative">
  <NotificationBadge count={unreadCount} />
  <NotificationList
    notifications={notifications}
    onDismiss={(id) => dismiss(id)}
  />
</div>

import { MfaCard, MfaSetupDialog, BackupCodesModal } from '@fabrk/components'

// MFA status card
<MfaCard
  enabled={user.mfaEnabled}
  onEnable={() => setShowSetup(true)}
  onDisable={() => disableMfa()}
/>

// Setup dialog with QR code
<MfaSetupDialog
  open={showSetup}
  onOpenChange={setShowSetup}
  onSetup={async (secret) => {
    await api.post('/api/mfa/enable', { secret })
  }}
  renderQrCode={(uri) => <QRCode value={uri} />}
/>

// Backup codes modal
<BackupCodesModal
  codes={backupCodes}
  onRegenerate={() => api.post('/api/mfa/regenerate')}
/>

import { PricingCard, UpgradeCTA, OnboardingChecklist } from '@fabrk/components'

// Pricing cards
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
  <PricingCard
    title="FREE"
    price="$0"
    period="/month"
    features={['5 projects', '1GB storage', 'Community support']}
    onSelect={() => selectPlan('free')}
  />
  <PricingCard
    title="PRO"
    price="$29"
    period="/month"
    features={['Unlimited projects', '100GB storage', 'Priority support', 'API access']}
    highlighted={true}
    onSelect={() => selectPlan('pro')}
  />
  <PricingCard
    title="ENTERPRISE"
    price="Custom"
    features={['Everything in Pro', 'SSO/SAML', 'Dedicated support', 'SLA']}
    onSelect={() => contactSales()}
  />
</div>

// Onboarding checklist
<OnboardingChecklist
  items={[
    { id: 'profile', label: 'Complete your profile', completed: true },
    { id: 'team', label: 'Invite team members', completed: true },
    { id: 'integration', label: 'Connect your first integration', completed: false },
    { id: 'deploy', label: 'Deploy to production', completed: false },
  ]}
  onItemClick={(id) => router.push(`/onboarding/${id}`)}
/>

import {
  TerminalSpinner, AsciiProgressBar, StatusPulse,
  Typewriter, LogStream
} from '@fabrk/components'

// Terminal loading spinner
<TerminalSpinner label="DEPLOYING..." />

// ASCII progress bar: [████████░░░░░░░░] 52%
<AsciiProgressBar value={52} max={100} />

// Status indicator with pulse animation
<StatusPulse status="healthy" label="API" />
<StatusPulse status="degraded" label="DATABASE" />
<StatusPulse status="down" label="QUEUE" />

// Typewriter text effect
<Typewriter text="Initializing FABRK framework..." speed={50} />

// Real-time log stream
<LogStream
  entries={[
    { timestamp: '12:03:45', level: 'info', message: 'Server started on port 3000' },
    { timestamp: '12:03:46', level: 'info', message: 'Connected to database' },
    { timestamp: '12:03:47', level: 'warn', message: 'Rate limiter using in-memory store' },
  ]}
/>

import { ErrorBoundary } from '@fabrk/components'

// Wrap your app or sections in ErrorBoundary
<ErrorBoundary
  fallback={({ error, reset }) => (
    <div className="p-6 text-center">
      <div className="text-destructive text-sm font-bold uppercase">
        [RUNTIME ERROR]
      </div>
      <p className="text-muted-foreground text-xs mt-2">{error.message}</p>
      <button onClick={reset} className="mt-4 text-primary text-xs">
        > RETRY
      </button>
    </div>
  )}
>
  <App />
</ErrorBoundary>