{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "ds-browser-mockup",
  "title": "BrowserMockup",
  "description": "Moldura simulando janela de navegador ou terminal de sistema operacional para screenshots e previews.",
  "dependencies": [
    "class-variance-authority",
    "lucide-react"
  ],
  "registryDependencies": [
    "@lema-ds/tokens"
  ],
  "files": [
    {
      "path": "components/ds/ds-browser-mockup.tsx",
      "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { LockIcon, TerminalIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\n// ── Types ──\n\nexport interface BrowserMockupProps\n  extends\n    React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof browserMockupVariants> {\n  url?: string\n  controls?: \"mac\" | \"windows\" | \"none\"\n  showAddressBar?: boolean\n  glow?: boolean\n}\n\n// ── Variants ──\n\nexport const browserMockupVariants = cva(\n  \"relative flex flex-col overflow-hidden rounded-xl border transition-all duration-200\",\n  {\n    variants: {\n      variant: {\n        default: \"border-border/80 bg-card text-card-foreground shadow-lg\",\n        minimal: \"border-border/50 bg-background/90 text-foreground shadow-sm\",\n        glass:\n          \"border-border/40 bg-background/60 text-foreground shadow-xl backdrop-blur-md\",\n        terminal: \"border-border/80 bg-card text-card-foreground shadow-2xl\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\n// ── Component ──\n\nexport const BrowserMockup = React.forwardRef<\n  HTMLDivElement,\n  BrowserMockupProps\n>(\n  (\n    {\n      className,\n      variant = \"default\",\n      url = \"https://lema.ufpb.br/app\",\n      controls = \"mac\",\n      showAddressBar = true,\n      glow = false,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const isTerminal = variant === \"terminal\"\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"relative\",\n          glow &&\n            \"before:absolute before:-inset-1.5 before:-z-10 before:rounded-2xl before:bg-gradient-to-r before:from-primary/30 before:via-highlight-violet/20 before:to-primary/30 before:opacity-60 before:blur-xl\"\n        )}\n      >\n        <div\n          className={cn(browserMockupVariants({ variant }), className)}\n          {...props}\n        >\n          {/* Header / Window Bar */}\n          <div\n            className={cn(\n              \"flex h-10 items-center justify-between gap-4 border-b px-4\",\n              \"border-border/60 bg-muted/40 text-muted-foreground\"\n            )}\n          >\n            {/* Window Controls */}\n            {controls === \"mac\" && (\n              <div className=\"flex items-center gap-1.5\" aria-hidden=\"true\">\n                <span className=\"size-2.5 rounded-full bg-destructive/80\" />\n                <span className=\"size-2.5 rounded-full bg-warning/80\" />\n                <span className=\"size-2.5 rounded-full bg-success/80\" />\n              </div>\n            )}\n\n            {controls === \"windows\" && (\n              <div\n                className=\"flex items-center gap-3 text-xs\"\n                aria-hidden=\"true\"\n              >\n                <span>—</span>\n                <span>□</span>\n                <span>✕</span>\n              </div>\n            )}\n\n            {controls === \"none\" && <div className=\"w-10\" />}\n\n            {/* Address bar / Terminal title */}\n            {isTerminal ? (\n              <div className=\"flex flex-1 items-center justify-center gap-1.5 text-xs text-muted-foreground\">\n                <TerminalIcon className=\"size-3.5\" aria-hidden=\"true\" />\n                <span>{url || \"bash — 80x24\"}</span>\n              </div>\n            ) : (\n              showAddressBar && (\n                <div className=\"flex max-w-sm flex-1 items-center justify-center gap-1.5 rounded-md border border-border/40 bg-background/50 px-3 py-0.5 text-xs text-muted-foreground shadow-xs\">\n                  <LockIcon className=\"size-3 shrink-0\" aria-hidden=\"true\" />\n                  <span className=\"truncate\">{url}</span>\n                </div>\n              )\n            )}\n\n            {/* Balancing placeholder for symmetric centering */}\n            <div className=\"w-10\" aria-hidden=\"true\" />\n          </div>\n\n          {/* Window Body */}\n          <div className=\"relative flex-1 overflow-auto\">{children}</div>\n        </div>\n      </div>\n    )\n  }\n)\nBrowserMockup.displayName = \"BrowserMockup\"\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}