{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "code-block-expand-demo",
  "registryDependencies": [
    "@delta/code-block"
  ],
  "files": [
    {
      "path": "examples/code-block-expand-demo.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { CodeBlock } from \"@/components/ui/code-block\"\n\nconst longCode = `import * as React from \"react\"\nimport { useEffect, useState, useCallback, useMemo } from \"react\"\nimport { cn } from \"@/lib/utils\"\n\ninterface DataItem {\n  id: string\n  name: string\n  description: string\n  status: \"active\" | \"inactive\" | \"pending\"\n  createdAt: Date\n  updatedAt: Date\n  metadata: Record<string, unknown>\n}\n\ninterface DataTableProps {\n  data: DataItem[]\n  onSelect?: (item: DataItem) => void\n  onDelete?: (id: string) => void\n  onEdit?: (item: DataItem) => void\n  className?: string\n  loading?: boolean\n  error?: Error | null\n}\n\nexport function DataTable({\n  data,\n  onSelect,\n  onDelete,\n  onEdit,\n  className,\n  loading = false,\n  error = null,\n}: DataTableProps) {\n  const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set())\n  const [sortColumn, setSortColumn] = useState<keyof DataItem>(\"name\")\n  const [sortDirection, setSortDirection] = useState<\"asc\" | \"desc\">(\"asc\")\n  const [filterText, setFilterText] = useState(\"\")\n\n  const filteredData = useMemo(() => {\n    return data\n      .filter((item) =>\n        item.name.toLowerCase().includes(filterText.toLowerCase()) ||\n        item.description.toLowerCase().includes(filterText.toLowerCase())\n      )\n      .sort((a, b) => {\n        const aVal = a[sortColumn]\n        const bVal = b[sortColumn]\n        const modifier = sortDirection === \"asc\" ? 1 : -1\n        if (aVal < bVal) return -1 * modifier\n        if (aVal > bVal) return 1 * modifier\n        return 0\n      })\n  }, [data, filterText, sortColumn, sortDirection])\n\n  const handleSelectAll = useCallback(() => {\n    if (selectedIds.size === filteredData.length) {\n      setSelectedIds(new Set())\n    } else {\n      setSelectedIds(new Set(filteredData.map((item) => item.id)))\n    }\n  }, [filteredData, selectedIds.size])\n\n  const handleSelectItem = useCallback((id: string) => {\n    setSelectedIds((prev) => {\n      const next = new Set(prev)\n      if (next.has(id)) {\n        next.delete(id)\n      } else {\n        next.add(id)\n      }\n      return next\n    })\n  }, [])\n\n  if (loading) {\n    return <div className=\"flex items-center justify-center p-8\">Loading...</div>\n  }\n\n  if (error) {\n    return <div className=\"text-red-500 p-4\">Error: {error.message}</div>\n  }\n\n  return (\n    <div className={cn(\"rounded-lg border\", className)}>\n      <div className=\"p-4 border-b\">\n        <input\n          type=\"text\"\n          placeholder=\"Filter items...\"\n          value={filterText}\n          onChange={(e) => setFilterText(e.target.value)}\n          className=\"w-full px-3 py-2 border rounded-md\"\n        />\n      </div>\n      <table className=\"w-full\">\n        <thead>\n          <tr className=\"border-b bg-muted/50\">\n            <th className=\"p-3 text-left\">\n              <input\n                type=\"checkbox\"\n                checked={selectedIds.size === filteredData.length}\n                onChange={handleSelectAll}\n              />\n            </th>\n            <th className=\"p-3 text-left font-medium\">Name</th>\n            <th className=\"p-3 text-left font-medium\">Status</th>\n            <th className=\"p-3 text-left font-medium\">Actions</th>\n          </tr>\n        </thead>\n        <tbody>\n          {filteredData.map((item) => (\n            <tr key={item.id} className=\"border-b hover:bg-muted/30\">\n              <td className=\"p-3\">\n                <input\n                  type=\"checkbox\"\n                  checked={selectedIds.has(item.id)}\n                  onChange={() => handleSelectItem(item.id)}\n                />\n              </td>\n              <td className=\"p-3\">{item.name}</td>\n              <td className=\"p-3\">\n                <span className={\\`px-2 py-1 rounded-full text-xs \\${\n                  item.status === \"active\" ? \"bg-green-100 text-green-800\" :\n                  item.status === \"inactive\" ? \"bg-gray-100 text-gray-800\" :\n                  \"bg-yellow-100 text-yellow-800\"\n                }\\`}>\n                  {item.status}\n                </span>\n              </td>\n              <td className=\"p-3 flex gap-2\">\n                <button onClick={() => onEdit?.(item)}>Edit</button>\n                <button onClick={() => onDelete?.(item.id)}>Delete</button>\n              </td>\n            </tr>\n          ))}\n        </tbody>\n      </table>\n    </div>\n  )\n}`\n\nexport default function CodeBlockExpandDemo() {\n  return (\n    <div className=\"flex h-full w-full max-w-full flex-col gap-4 self-start\">\n      <CodeBlock\n        code={longCode}\n        language=\"typescript\"\n        filename=\"data-table.tsx\"\n        expandable\n        className=\"border-none\"\n        collapsedHeight=\"12rem\"\n      />\n    </div>\n  )\n}\n",
      "type": "registry:example"
    }
  ],
  "type": "registry:example"
}