{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "code-block",
  "type": "registry:ui",
  "title": "Code Block",
  "description": "Code container with copy button and language badge.",
  "registryDependencies": [
    "https://raw.githubusercontent.com/truongnat/rnui/main/registry/dist/nativewind/utils.json",
    "https://raw.githubusercontent.com/truongnat/rnui/main/registry/dist/nativewind/theme.json"
  ],
  "dependencies": [
    "lucide-react-native"
  ],
  "files": [
    {
      "path": "registry/shared/ui/code-block.tsx",
      "type": "registry:ui",
      "target": "components/ui/code-block.tsx",
      "content": "import { useEffect, useRef, useState } from 'react';\nimport {\n  Pressable,\n  ScrollView,\n  Text,\n  View,\n  type ViewProps,\n} from 'react-native';\nimport { Check, Copy } from 'lucide-react-native';\nimport { cn, useIconColor } from '@/lib/utils';\n\n// Optional peer: expo-clipboard gives native copy support.\n// Expo: npx expo install expo-clipboard\ninterface ExpoClipboardModule {\n  setStringAsync?: (s: string) => Promise<void>;\n}\nlet expoClipboard: ExpoClipboardModule | null = null;\ntry {\n  // eslint-disable-next-line @typescript-eslint/no-require-imports\n  expoClipboard = require('expo-clipboard');\n} catch {\n  // expo-clipboard not installed — fall back to navigator.clipboard / RN core\n}\n\ninterface WebNavigatorClipboard {\n  clipboard?: { writeText: (s: string) => Promise<void> };\n}\n\nfunction copyToClipboard(text: string): void {\n  if (expoClipboard?.setStringAsync) {\n    void expoClipboard.setStringAsync(text);\n    return;\n  }\n  const nav: WebNavigatorClipboard | undefined =\n    typeof globalThis === 'object' && 'navigator' in globalThis\n      ? (globalThis.navigator as WebNavigatorClipboard) // RN web shim; shape checked by property access below\n      : undefined;\n  if (nav?.clipboard) {\n    void nav.clipboard.writeText(text).catch(() => {});\n    return;\n  }\n  try {\n    // Deprecated RN core Clipboard — last resort.\n    // eslint-disable-next-line @typescript-eslint/no-require-imports\n    require('react-native').Clipboard?.setString(text);\n  } catch {\n    // No clipboard implementation available.\n  }\n}\n\nexport interface CodeBlockProps extends ViewProps {\n  /** Source text to render. */\n  code: string;\n  /** Cosmetic language badge shown in the header. */\n  language?: string;\n  /** Header title (e.g. file name). */\n  title?: string;\n  /** Show the copy button. */\n  showCopyButton?: boolean;\n  /** Cap the scrollable code area. */\n  maxHeight?: number;\n  /** Called after a copy attempt. */\n  onCopy?: () => void;\n  className?: string;\n  /** Extra classes for the code text. */\n  codeClassName?: string;\n}\n\n/**\n * Monospace code container with a copy button and optional title bar.\n * `language` is purely cosmetic — no syntax highlighting.\n */\nexport function CodeBlock({\n  code,\n  language,\n  title,\n  showCopyButton = true,\n  maxHeight,\n  onCopy,\n  className,\n  codeClassName,\n  ...props\n}: CodeBlockProps) {\n  const [copied, setCopied] = useState(false);\n  const timer = useRef<number | undefined>(undefined);\n  const iconColor = useIconColor('muted');\n\n  useEffect(() => () => clearTimeout(timer.current), []);\n\n  const handleCopy = () => {\n    if (!code) return;\n    copyToClipboard(code);\n    setCopied(true);\n    onCopy?.();\n    clearTimeout(timer.current);\n    timer.current = setTimeout(() => setCopied(false), 2000);\n  };\n\n  const copyButton = showCopyButton ? (\n    <Pressable\n      onPress={handleCopy}\n      accessibilityRole=\"button\"\n      accessibilityLabel={copied ? 'Copied' : 'Copy code'}\n      hitSlop={8}\n      className=\"flex-row items-center gap-1 opacity-80 active:opacity-60\"\n    >\n      {copied ? (\n        <Check size={16} color={iconColor} />\n      ) : (\n        <Copy size={16} color={iconColor} />\n      )}\n      {copied ? (\n        <Text className=\"text-xs text-muted-foreground\">Copied!</Text>\n      ) : null}\n    </Pressable>\n  ) : null;\n\n  const hasHeader = !!title || !!language;\n\n  return (\n    <View\n      className={cn(\n        'overflow-hidden rounded-lg border border-border bg-muted',\n        className\n      )}\n      {...props}\n    >\n      {hasHeader ? (\n        <View className=\"flex-row items-center gap-2 border-b border-border bg-muted-foreground/10 px-3 py-2\">\n          {title ? (\n            <Text\n              numberOfLines={1}\n              className=\"flex-1 text-xs font-medium text-foreground\"\n            >\n              {title}\n            </Text>\n          ) : (\n            <View className=\"flex-1\" />\n          )}\n          {language ? (\n            <Text className=\"rounded bg-muted px-1.5 py-0.5 text-[10px] uppercase text-muted-foreground\">\n              {language}\n            </Text>\n          ) : null}\n          {copyButton}\n        </View>\n      ) : null}\n      <ScrollView\n        style={maxHeight ? { maxHeight } : undefined}\n        showsVerticalScrollIndicator\n      >\n        <ScrollView horizontal showsHorizontalScrollIndicator={false}>\n          <Text\n            className={cn(\n              'p-4 font-mono text-xs leading-5 text-foreground',\n              codeClassName\n            )}\n            selectable\n          >\n            {code}\n          </Text>\n        </ScrollView>\n      </ScrollView>\n      {!hasHeader && copyButton ? (\n        <View className=\"absolute right-3 top-3\">{copyButton}</View>\n      ) : null}\n    </View>\n  );\n}\n"
    }
  ]
}