{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hero-split-device-mockup",
  "title": "Hero Split Device Mockup",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/hero-split-device-mockup/HeroSplitDeviceMockup.tsx",
      "content": "'use client'\n\nimport * as React from 'react'\nimport { ArrowRight, Monitor, Moon, Smartphone, Sun, Tablet } from 'lucide-react'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent } from '@/components/ui/card'\nimport { cn } from '@/lib/utils'\n\nexport interface HeroSplitDeviceMockupProps {\n  title?: string\n  description?: string\n  className?: string\n}\n\ntype DeviceMode = 'desktop' | 'tablet' | 'mobile'\n\nconst MOCK_KPIS = [\n  { label: 'Active Sessions', value: '24,892', change: '+14.2%', status: 'up' },\n  { label: 'Conversion Rate', value: '4.82%', change: '+0.6%', status: 'up' },\n  { label: 'Avg TTFB', value: '18ms', change: '-4ms', status: 'optimal' },\n]\n\nexport function HeroSplitDeviceMockup({\n  title = 'Responsive components with identical fidelity on every device.',\n  description = 'Every primitive and block is engineered with fluid container queries and zero layout shift across desktop, tablet, and mobile displays.',\n  className,\n}: HeroSplitDeviceMockupProps) {\n  const [activeMode, setActiveMode] = React.useState<DeviceMode>('desktop')\n  const [isDarkMode, setIsDarkMode] = React.useState(true)\n  const [activeTab, setActiveTab] = React.useState<'overview' | 'analytics' | 'activity'>('overview')\n\n  const viewportWidthClass = React.useMemo(() => {\n    if (activeMode === 'desktop') return 'w-full max-w-2xl'\n    if (activeMode === 'tablet') return 'w-full max-w-md'\n    return 'w-full max-w-[320px]'\n  }, [activeMode])\n\n  return (\n    <section\n      data-slot=\"hero-split-device-mockup\"\n      className={cn('bg-background relative overflow-hidden py-16 sm:py-24 lg:py-28', className)}\n    >\n      <div className=\"mx-auto max-w-7xl px-4 sm:px-6 lg:px-8\">\n        {/* Top Title & Badge Area */}\n        <div className=\"mx-auto max-w-3xl space-y-4 text-center\">\n          <a\n            href=\"#device-preview\"\n            className=\"group border-border/80 bg-secondary/60 hover:bg-secondary text-foreground inline-flex items-center gap-2 rounded-full border px-3.5 py-1 text-xs font-medium shadow-2xs transition-colors\"\n          >\n            <Smartphone className=\"text-primary size-3.5\" />\n            <span>Fluid Container Queries &bull; Tailwind v4 Ready</span>\n            <ArrowRight className=\"text-muted-foreground size-3 transition-transform group-hover:translate-x-0.5\" />\n          </a>\n\n          <h1 className=\"text-foreground text-3xl font-bold tracking-tight sm:text-4xl lg:text-5xl\">{title}</h1>\n\n          <p className=\"text-muted-foreground text-base sm:text-lg\">{description}</p>\n\n          {/* Viewport Controls & Interactive Triggers */}\n          <div className=\"flex flex-wrap items-center justify-center gap-2 pt-2\">\n            <div className=\"border-border bg-muted/50 inline-flex rounded-lg border p-1 shadow-2xs\">\n              <button\n                type=\"button\"\n                className={cn(\n                  'flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium transition-colors',\n                  activeMode === 'desktop'\n                    ? 'bg-background text-foreground shadow-2xs'\n                    : 'text-muted-foreground hover:text-foreground',\n                )}\n                onClick={() => setActiveMode('desktop')}\n              >\n                <Monitor className=\"size-3.5\" />\n                <span>Desktop (1440px)</span>\n              </button>\n\n              <button\n                type=\"button\"\n                className={cn(\n                  'flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium transition-colors',\n                  activeMode === 'tablet'\n                    ? 'bg-background text-foreground shadow-2xs'\n                    : 'text-muted-foreground hover:text-foreground',\n                )}\n                onClick={() => setActiveMode('tablet')}\n              >\n                <Tablet className=\"size-3.5\" />\n                <span>Tablet (768px)</span>\n              </button>\n\n              <button\n                type=\"button\"\n                className={cn(\n                  'flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium transition-colors',\n                  activeMode === 'mobile'\n                    ? 'bg-background text-foreground shadow-2xs'\n                    : 'text-muted-foreground hover:text-foreground',\n                )}\n                onClick={() => setActiveMode('mobile')}\n              >\n                <Smartphone className=\"size-3.5\" />\n                <span>Mobile (375px)</span>\n              </button>\n            </div>\n\n            <Button\n              variant=\"outline\"\n              size=\"sm\"\n              className=\"border-border gap-1.5 text-xs\"\n              onClick={() => setIsDarkMode((prev) => !prev)}\n            >\n              {isDarkMode ? <Sun className=\"size-3.5\" /> : <Moon className=\"size-3.5\" />}\n              <span>{isDarkMode ? 'Dark Frame' : 'Light Frame'}</span>\n            </Button>\n          </div>\n        </div>\n\n        {/* Split Device Mockup Canvas */}\n        <div className=\"mt-12 flex justify-center\">\n          <div\n            className={cn(\n              'border-border bg-card rounded-xl border p-2 shadow-md transition-colors duration-300 ease-out sm:p-3',\n              viewportWidthClass,\n              isDarkMode ? 'dark' : '',\n            )}\n          >\n            {/* Browser / Device Chrome Header */}\n            <div className=\"border-border/80 flex items-center justify-between border-b px-2 pt-1 pb-2.5\">\n              <div className=\"flex items-center gap-1.5\">\n                <span className=\"bg-destructive/80 size-2.5 rounded-full\" />\n                <span className=\"bg-warning/80 size-2.5 rounded-full\" />\n                <span className=\"bg-success/80 size-2.5 rounded-full\" />\n              </div>\n\n              {/* URL Bar */}\n              <div className=\"border-border/60 bg-muted/60 text-muted-foreground mx-auto flex h-6 w-1/2 items-center justify-center truncate rounded-md border px-2 font-mono text-xs\">\n                https://uipkge.dev/demo/dashboard-kpis\n              </div>\n\n              <div className=\"text-muted-foreground flex items-center gap-1\">\n                <span className=\"bg-success size-2 rounded-full\" />\n                <span className=\"font-mono text-xs\">LIVE</span>\n              </div>\n            </div>\n\n            {/* Inside Interactive Device Application */}\n            <div className=\"bg-background space-y-4 rounded-lg p-4 pt-4\">\n              {/* App Header Inside Frame */}\n              <div className=\"border-border flex items-center justify-between border-b pb-3\">\n                <div className=\"flex items-center gap-2\">\n                  <div className=\"bg-primary text-primary-foreground flex size-7 items-center justify-center rounded-md text-xs font-bold\">\n                    UI\n                  </div>\n                  <div>\n                    <div className=\"text-foreground text-xs font-semibold\">Platform Metrics</div>\n                    <div className=\"text-muted-foreground text-xs\">Production Cluster (us-east-1)</div>\n                  </div>\n                </div>\n\n                {/* Inner App Tabs */}\n                <div className=\"border-border bg-muted/40 flex gap-1 rounded-md border p-0.5\">\n                  <button\n                    type=\"button\"\n                    className={cn(\n                      'rounded px-2 py-0.5 text-xs font-medium transition-colors',\n                      activeTab === 'overview'\n                        ? 'bg-background text-foreground shadow-2xs'\n                        : 'text-muted-foreground hover:text-foreground',\n                    )}\n                    onClick={() => setActiveTab('overview')}\n                  >\n                    Overview\n                  </button>\n                  <button\n                    type=\"button\"\n                    className={cn(\n                      'rounded px-2 py-0.5 text-xs font-medium transition-colors',\n                      activeTab === 'analytics'\n                        ? 'bg-background text-foreground shadow-2xs'\n                        : 'text-muted-foreground hover:text-foreground',\n                    )}\n                    onClick={() => setActiveTab('analytics')}\n                  >\n                    Analytics\n                  </button>\n                </div>\n              </div>\n\n              {/* KPI Metric Grid in Frame */}\n              <div className={cn('grid gap-2.5', activeMode === 'mobile' ? 'grid-cols-1' : 'grid-cols-3')}>\n                {MOCK_KPIS.map((kpi, idx) => (\n                  <Card key={idx} className=\"border-border bg-card/60 shadow-2xs\">\n                    <CardContent className=\"space-y-1 p-3\">\n                      <div className=\"text-muted-foreground text-xs font-medium\">{kpi.label}</div>\n                      <div className=\"text-foreground text-lg font-bold tracking-tight\">{kpi.value}</div>\n                      <div className=\"text-success flex items-center gap-1 text-xs font-medium\">\n                        <span>{kpi.change}</span>\n                        <span className=\"text-muted-foreground\">&bull; vs last week</span>\n                      </div>\n                    </CardContent>\n                  </Card>\n                ))}\n              </div>\n\n              {/* Interactive Wave / Chart Preview */}\n              <div className=\"border-border/80 bg-muted/20 space-y-2 rounded-lg border p-3\">\n                <div className=\"flex items-center justify-between text-xs\">\n                  <span className=\"text-foreground font-medium\">Real-time Telemetry Stream</span>\n                  <Badge variant=\"outline\" className=\"border-border text-success font-mono text-xs\">\n                    Synced: 0.2ms\n                  </Badge>\n                </div>\n\n                {/* SVG Mock Sparkline Chart */}\n                <svg\n                  className=\"stroke-primary fill-primary/10 h-16 w-full\"\n                  viewBox=\"0 0 300 60\"\n                  preserveAspectRatio=\"none\"\n                >\n                  <path d=\"M0 45 Q 25 20, 50 35 T 100 25 T 150 15 T 200 30 T 250 10 T 300 20 L 300 60 L 0 60 Z\" />\n                  <path\n                    d=\"M0 45 Q 25 20, 50 35 T 100 25 T 150 15 T 200 30 T 250 10 T 300 20\"\n                    fill=\"none\"\n                    strokeWidth=\"2\"\n                  />\n                </svg>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/hero-split-device-mockup/HeroSplitDeviceMockup.tsx"
    },
    {
      "path": "packages/registry-react/blocks/hero-split-device-mockup/index.ts",
      "content": "export { HeroSplitDeviceMockup } from './HeroSplitDeviceMockup'\nexport type { HeroSplitDeviceMockupProps } from './HeroSplitDeviceMockup'\n",
      "type": "registry:block",
      "target": "~/components/blocks/hero-split-device-mockup/index.ts"
    }
  ],
  "dependencies": [
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/react/badge.json",
    "https://uipkge.dev/r/react/button.json",
    "https://uipkge.dev/r/react/card.json"
  ],
  "description": "Dual viewport device mockup hero with interactive viewport controls and real-time state synchronization.",
  "categories": [
    "hero",
    "marketing"
  ],
  "deprecated": true,
  "replacedBy": "hero"
}