{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "code-snippet",
  "type": "registry:ui",
  "description": "Code snippet component",
  "files": [
    {
      "path": "packages/code/snippet.tsx",
      "content": "'use client';\n\nimport { CheckIcon, CopyIcon } from 'lucide-react';\nimport {\n  type ComponentProps,\n  cloneElement,\n  type HTMLAttributes,\n  type ReactElement,\n  useState,\n} from 'react';\nimport { Button } from '@/components/ui/button';\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';\nimport { cn } from '@repo/shadcn-ui/lib/utils';\n\nexport type CodeSnippetProps = ComponentProps<typeof Tabs>;\n\nexport const CodeSnippet = ({ className, ...props }: CodeSnippetProps) => (\n  <Tabs\n    className={cn(\n      'group w-full gap-0 overflow-hidden rounded-md border',\n      className\n    )}\n    {...props}\n  />\n);\n\nexport type CodeSnippetHeaderProps = HTMLAttributes<HTMLDivElement>;\n\nexport const CodeSnippetHeader = ({ className, ...props }: CodeSnippetHeaderProps) => (\n  <div\n    className={cn(\n      'flex flex-row items-center justify-between border-b bg-secondary p-1',\n      className\n    )}\n    {...props}\n  />\n);\n\nexport type CodeSnippetCopyButtonProps = ComponentProps<typeof Button> & {\n  value: string;\n  onCopy?: () => void;\n  onError?: (error: Error) => void;\n  timeout?: number;\n};\n\nexport const CodeSnippetCopyButton = ({\n  asChild,\n  value,\n  onCopy,\n  onError,\n  timeout = 2000,\n  children,\n  ...props\n}: CodeSnippetCopyButtonProps) => {\n  const [isCopied, setIsCopied] = useState(false);\n\n  const copyToClipboard = () => {\n    if (\n      typeof window === 'undefined' ||\n      !navigator.clipboard.writeText ||\n      !value\n    ) {\n      return;\n    }\n\n    navigator.clipboard.writeText(value).then(() => {\n      setIsCopied(true);\n      onCopy?.();\n\n      setTimeout(() => setIsCopied(false), timeout);\n    }, onError);\n  };\n\n  if (asChild) {\n    return cloneElement(children as ReactElement, {\n      // @ts-expect-error - we know this is a button\n      onClick: copyToClipboard,\n    });\n  }\n\n  const icon = isCopied ? <CheckIcon size={14} /> : <CopyIcon size={14} />;\n\n  return (\n    <Button\n      className=\"opacity-0 transition-opacity group-hover:opacity-100\"\n      onClick={copyToClipboard}\n      size=\"icon\"\n      variant=\"ghost\"\n      {...props}\n    >\n      {children ?? icon}\n    </Button>\n  );\n};\n\nexport type CodeSnippetTabsListProps = ComponentProps<typeof TabsList>;\n\nexport const CodeSnippetTabsList = TabsList;\n\nexport type CodeSnippetTabsTriggerProps = ComponentProps<typeof TabsTrigger>;\n\nexport const CodeSnippetTabsTrigger = ({\n  className,\n  ...props\n}: CodeSnippetTabsTriggerProps) => (\n  <TabsTrigger className={cn('gap-1.5', className)} {...props} />\n);\n\nexport type CodeSnippetTabsContentProps = ComponentProps<typeof TabsContent>;\n\nexport const CodeSnippetTabsContent = ({\n  className,\n  children,\n  ...props\n}: CodeSnippetTabsContentProps) => (\n  <TabsContent\n    asChild\n    className={cn('mt-0 bg-background p-4 text-sm', className)}\n    {...props}\n  >\n    <pre className=\"truncate\">{children}</pre>\n  </TabsContent>\n);\n",
      "type": "registry:component"
    }
  ]
}