{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "code-snippet",
  "title": "Code Snippet",
  "description": "A code snippet component with tabs and copy functionality.",
  "dependencies": [
    "lucide-react",
    "@base-ui/react",
    "clsx",
    "tailwind-merge"
  ],
  "registryDependencies": [
    "https://optics.agusmayol.com.ar/r/button.json",
    "https://optics.agusmayol.com.ar/r/tabs.json",
    "https://optics.agusmayol.com.ar/r/scroll-area.json",
    "https://optics.agusmayol.com.ar/r/utils.json"
  ],
  "files": [
    {
      "path": "registry/optics/code-snippet.jsx",
      "content": "\"use client\";\n\nimport { CheckIcon, CopyIcon } from \"lucide-react\";\nimport { useState } from \"react\";\nimport { Button } from \"@/registry/optics/button\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { mergeProps } from \"@base-ui/react/merge-props\";\nimport {\n\tTabs,\n\tTabsContent,\n\tTabsContents,\n\tTabsList,\n\tTabsTrigger,\n} from \"@/registry/optics/tabs\";\nimport { ScrollArea } from \"@/registry/optics/scroll-area\";\nimport { cn } from \"@/registry/optics/lib/utils\";\n\nexport const Snippet = ({ className = \"\", ...props }) => (\n\t<Tabs\n\t\tclassName={cn(\n\t\t\t\"group w-full gap-0 overflow-hidden rounded-md border border-input\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n);\n\nexport const SnippetHeader = ({ className = \"\", ...props }) => (\n\t<div\n\t\tclassName={cn(\n\t\t\t\"flex flex-row items-center justify-between border-b bg-secondary p-1\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n);\n\nexport const SnippetCopyButton = ({\n\trender = undefined,\n\tvalue = \"\",\n\tonCopy = undefined,\n\tonError = undefined,\n\ttimeout = 2000,\n\t...props\n}) => {\n\tconst [isCopied, setIsCopied] = useState(false);\n\n\tconst copyToClipboard = async () => {\n\t\tif (typeof window === \"undefined\" || !value) return;\n\n\t\ttry {\n\t\t\t// Try modern clipboard API first\n\t\t\tif (navigator.clipboard?.writeText) {\n\t\t\t\tawait navigator.clipboard.writeText(value);\n\t\t\t} else {\n\t\t\t\t// Fallback for iOS and older browsers\n\t\t\t\tconst textArea = document.createElement(\"textarea\");\n\t\t\t\ttextArea.value = value;\n\t\t\t\ttextArea.style.position = \"fixed\";\n\t\t\t\ttextArea.style.opacity = \"0\";\n\t\t\t\tdocument.body.appendChild(textArea);\n\t\t\t\ttextArea.select();\n\t\t\t\tdocument.execCommand(\"copy\");\n\t\t\t\tdocument.body.removeChild(textArea);\n\t\t\t}\n\t\t\tsetIsCopied(true);\n\t\t\tonCopy?.();\n\t\t\tsetTimeout(() => setIsCopied(false), timeout);\n\t\t} catch (error) {\n\t\t\tonError?.(error);\n\t\t}\n\t};\n\n\tconst buttonContent = (\n\t\t<>\n\t\t\t<div className=\"relative\">\n\t\t\t\t<div\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\"absolute inset-0 flex items-center justify-center transition-all duration-300 ease-in-out will-change-[transform,opacity,filter]\",\n\t\t\t\t\t\tisCopied\n\t\t\t\t\t\t\t? \"scale-100 opacity-100 blur-0\"\n\t\t\t\t\t\t\t: \"blur-xs scale-[0.25] opacity-0\",\n\t\t\t\t\t)}\n\t\t\t\t>\n\t\t\t\t\t<CheckIcon className=\"text-muted-foreground\" size={14} />\n\t\t\t\t</div>\n\t\t\t\t<div\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\"transition-[transform, opacity, filter] duration-300 ease-in-out will-change-[transform,opacity,filter]\",\n\t\t\t\t\t\tisCopied\n\t\t\t\t\t\t\t? \"blur-xs scale-[0.25] opacity-0\"\n\t\t\t\t\t\t\t: \"scale-100 opacity-100 blur-0\",\n\t\t\t\t\t)}\n\t\t\t\t>\n\t\t\t\t\t<CopyIcon className=\"text-muted-foreground\" size={14} />\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<span className=\"sr-only\">Copy to clipboard</span>\n\t\t</>\n\t);\n\n\tconst defaultProps = {\n\t\tvariant: \"ghost\",\n\t\trole: \"button\",\n\t\t\"aria-label\": \"Copy to clipboard\",\n\t\tsize: \"icon\",\n\t\tclassName: cn(\"shrink-0\"),\n\t\tonClick: copyToClipboard,\n\t\tchildren: buttonContent,\n\t};\n\n\tif (render) {\n\t\tconst element = useRender({\n\t\t\tdefaultTagName: \"button\",\n\t\t\trender:\n\t\t\t\ttypeof render === \"function\"\n\t\t\t\t\t? (props, state) => {\n\t\t\t\t\t\t\tconst mergedProps = mergeProps(\"button\", defaultProps, props);\n\t\t\t\t\t\t\treturn render(mergedProps, { isCopied, ...state });\n\t\t\t\t\t\t}\n\t\t\t\t\t: render,\n\t\t\tprops: mergeProps(\"button\", defaultProps, props),\n\t\t\tstate: {\n\t\t\t\tisCopied,\n\t\t\t},\n\t\t});\n\t\treturn element;\n\t}\n\n\treturn <Button {...defaultProps} {...props} />;\n};\n\nexport const SnippetTabsList = ({ className = \"\", ...props }) => (\n\t<TabsList className={cn(className)} {...props} />\n);\n\nexport const SnippetTabsTrigger = ({ className = \"\", ...props }) => (\n\t<TabsTrigger className={cn(\"gap-1.5\", className)} {...props} />\n);\n\nexport const SnippetTabsContent = ({\n\tclassName = \"\",\n\tchildren = null,\n\ttextClassName = \"\",\n\t...props\n}) => (\n\t<TabsContent className={cn(\"mt-0 bg-background p-4\", className)} {...props}>\n\t\t<ScrollArea\n\t\t\tclassName=\"w-full\"\n\t\t\tviewportClassName={cn(\n\t\t\t\t\"w-full text-sm font-mono whitespace-nowrap\",\n\t\t\t\ttextClassName,\n\t\t\t)}\n\t\t>\n\t\t\t<div className=\"flex items-center justify-between gap-4 min-w-full\">\n\t\t\t\t{children}\n\t\t\t</div>\n\t\t</ScrollArea>\n\t</TabsContent>\n);\n\nexport const SnippetTabsContents = ({\n\tclassName = \"\",\n\tchildren = null,\n\t...props\n}) => (\n\t<TabsContents className={cn(className)} {...props}>\n\t\t{children}\n\t</TabsContents>\n);\n\nSnippet.displayName = \"Snippet\";\nSnippetHeader.displayName = \"SnippetHeader\";\nSnippetCopyButton.displayName = \"SnippetCopyButton\";\nSnippetTabsList.displayName = \"SnippetTabsList\";\nSnippetTabsTrigger.displayName = \"SnippetTabsTrigger\";\nSnippetTabsContent.displayName = \"SnippetTabsContent\";\nSnippetTabsContents.displayName = \"SnippetTabsContents\";\n",
      "type": "registry:component",
      "target": "components/optics/code-snippet.jsx"
    }
  ],
  "type": "registry:component"
}