{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "ai-package-info",
  "title": "AI: Package Info",
  "description": "Package version, registry and dependency metadata in a composable card.",
  "dependencies": [
    "@untitledui/icons@^0.0.23"
  ],
  "registryDependencies": [
    "@nx-ui/utils",
    "@nx-ui/badge"
  ],
  "files": [
    {
      "path": "components/ai/package-info.tsx",
      "content": "// Ported from vercel/ai-elements@6a9d5b1822ffb10bba4bd97175f01edd7d8651cd.\n\"use client\";\n\nimport { Badge } from \"@/components/ui/badge\";\nimport { cn } from \"@/lib/utils\";\nimport { ArrowRight as ArrowRightIcon, Minus as MinusIcon, Package as PackageIcon, Plus as PlusIcon } from \"@untitledui/icons\";\nimport type { HTMLAttributes } from \"react\";\nimport { createContext, useContext, useMemo } from \"react\";\n\ntype ChangeType = \"major\" | \"minor\" | \"patch\" | \"added\" | \"removed\";\n\ninterface PackageInfoContextType {\n  name: string;\n  currentVersion?: string;\n  newVersion?: string;\n  changeType?: ChangeType;\n}\n\nconst PackageInfoContext = createContext<PackageInfoContextType>({\n  name: \"\",\n});\n\nexport type PackageInfoHeaderProps = HTMLAttributes<HTMLDivElement>;\n\nexport const PackageInfoHeader = ({\n  className,\n  children,\n  ...props\n}: PackageInfoHeaderProps) => (\n  <div\n    className={cn(\"flex items-center justify-between gap-2\", className)}\n    {...props}\n  >\n    {children}\n  </div>\n);\n\nexport type PackageInfoNameProps = HTMLAttributes<HTMLDivElement>;\n\nexport const PackageInfoName = ({\n  className,\n  children,\n  ...props\n}: PackageInfoNameProps) => {\n  const { name } = useContext(PackageInfoContext);\n\n  return (\n    <div className={cn(\"flex items-center gap-2\", className)} {...props}>\n      <PackageIcon className=\"size-4 text-muted-foreground\" />\n      <span className=\"font-medium font-mono text-sm\">{children ?? name}</span>\n    </div>\n  );\n};\n\nconst changeTypeStyles: Record<ChangeType, string> = {\n  added: \"bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400\",\n  major: \"bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400\",\n  minor:\n    \"bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400\",\n  patch: \"bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400\",\n  removed: \"bg-gray-100 text-gray-700 dark:bg-gray-900/30 dark:text-gray-400\",\n};\n\nconst changeTypeIcons: Record<ChangeType, React.ReactNode> = {\n  added: <PlusIcon className=\"size-3\" />,\n  major: <ArrowRightIcon className=\"size-3\" />,\n  minor: <ArrowRightIcon className=\"size-3\" />,\n  patch: <ArrowRightIcon className=\"size-3\" />,\n  removed: <MinusIcon className=\"size-3\" />,\n};\n\nexport type PackageInfoChangeTypeProps = HTMLAttributes<HTMLDivElement>;\n\nexport const PackageInfoChangeType = ({\n  className,\n  children,\n  ...props\n}: PackageInfoChangeTypeProps) => {\n  const { changeType } = useContext(PackageInfoContext);\n\n  if (!changeType) {\n    return null;\n  }\n\n  return (\n    <Badge\n      className={cn(\n        \"gap-1 text-xs capitalize\",\n        changeTypeStyles[changeType],\n        className\n      )}\n      variant=\"secondary\"\n      {...props}\n    >\n      {changeTypeIcons[changeType]}\n      {children ?? changeType}\n    </Badge>\n  );\n};\n\nexport type PackageInfoVersionProps = HTMLAttributes<HTMLDivElement>;\n\nexport const PackageInfoVersion = ({\n  className,\n  children,\n  ...props\n}: PackageInfoVersionProps) => {\n  const { currentVersion, newVersion } = useContext(PackageInfoContext);\n\n  if (!(currentVersion || newVersion)) {\n    return null;\n  }\n\n  return (\n    <div\n      className={cn(\n        \"mt-2 flex items-center gap-2 font-mono text-muted-foreground text-sm\",\n        className\n      )}\n      {...props}\n    >\n      {children ?? (\n        <>\n          {currentVersion && <span>{currentVersion}</span>}\n          {currentVersion && newVersion && (\n            <ArrowRightIcon className=\"size-3\" />\n          )}\n          {newVersion && (\n            <span className=\"font-medium text-foreground\">{newVersion}</span>\n          )}\n        </>\n      )}\n    </div>\n  );\n};\n\nexport type PackageInfoProps = HTMLAttributes<HTMLDivElement> & {\n  name: string;\n  currentVersion?: string;\n  newVersion?: string;\n  changeType?: ChangeType;\n};\n\nexport const PackageInfo = ({\n  name,\n  currentVersion,\n  newVersion,\n  changeType,\n  className,\n  children,\n  ...props\n}: PackageInfoProps) => {\n  const contextValue = useMemo(\n    () => ({ changeType, currentVersion, name, newVersion }),\n    [changeType, currentVersion, name, newVersion]\n  );\n\n  return (\n    <PackageInfoContext.Provider value={contextValue}>\n      <div\n        className={cn(\"rounded-lg border bg-background p-4\", className)}\n        {...props}\n      >\n        {children ?? (\n          <>\n            <PackageInfoHeader>\n              <PackageInfoName />\n              {changeType && <PackageInfoChangeType />}\n            </PackageInfoHeader>\n            {(currentVersion || newVersion) && <PackageInfoVersion />}\n          </>\n        )}\n      </div>\n    </PackageInfoContext.Provider>\n  );\n};\n\nexport type PackageInfoDescriptionProps = HTMLAttributes<HTMLParagraphElement>;\n\nexport const PackageInfoDescription = ({\n  className,\n  children,\n  ...props\n}: PackageInfoDescriptionProps) => (\n  <p className={cn(\"mt-2 text-muted-foreground text-sm\", className)} {...props}>\n    {children}\n  </p>\n);\n\nexport type PackageInfoContentProps = HTMLAttributes<HTMLDivElement>;\n\nexport const PackageInfoContent = ({\n  className,\n  children,\n  ...props\n}: PackageInfoContentProps) => (\n  <div className={cn(\"mt-3 border-t pt-3\", className)} {...props}>\n    {children}\n  </div>\n);\n\nexport type PackageInfoDependenciesProps = HTMLAttributes<HTMLDivElement>;\n\nexport const PackageInfoDependencies = ({\n  className,\n  children,\n  ...props\n}: PackageInfoDependenciesProps) => (\n  <div className={cn(\"space-y-2\", className)} {...props}>\n    <span className=\"font-medium text-muted-foreground text-xs uppercase tracking-wide\">\n      Dependencies\n    </span>\n    <div className=\"space-y-1\">{children}</div>\n  </div>\n);\n\nexport type PackageInfoDependencyProps = HTMLAttributes<HTMLDivElement> & {\n  name: string;\n  version?: string;\n};\n\nexport const PackageInfoDependency = ({\n  name,\n  version,\n  className,\n  children,\n  ...props\n}: PackageInfoDependencyProps) => (\n  <div\n    className={cn(\"flex items-center justify-between text-sm\", className)}\n    {...props}\n  >\n    {children ?? (\n      <>\n        <span className=\"font-mono text-muted-foreground\">{name}</span>\n        {version && <span className=\"font-mono text-xs\">{version}</span>}\n      </>\n    )}\n  </div>\n);\n",
      "type": "registry:ui",
      "target": "components/ai/package-info.tsx"
    }
  ],
  "type": "registry:ui"
}